如何将 CSS 卡片放在背景图片上
How to put CSS card over background image
我正在为这张 CSS 卡而苦苦挣扎，我想把它放在背景图片上，但我不知道怎么做，我已经尝试过定位
我不小心把背景图片放在了header，我把它改成了div，还是不行
有人可以帮忙吗？
* {
margin: 0;
padding: 0;
font-family: 'Century Gothic';
}
img {
width: 100%;
}
.header {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(images/foto_beginpagina.jpg);
height: 100vh;
background-size: cover;
background-position: center;
}
ul {
float: right;
list-style-type: none;
margin-top: 25px;
}
ul li {
display: inline-block;
}
ul li a {
text-decoration: none;
color: white;
padding: 5px 20px;
border: 1px solid white;
transition: 0.6s ease;
}
ul li.huidig a {
background-color: white;
color: black;
}
ul li a:hover {
background-color: white;
color: black;
}
.head {
margin-right: 25px;
}
.titel {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.titel h1 {
color: white;
font-size: 70px;
}
div.ondertitel h3 {
color: white;
padding-top: 20px;
max-width: 600px;
left: 50%;
}
.card {
position: absolute;
margin: 30px;
padding: 10px;
background: rgb(139, 119, 167);
background: radial-gradient(circle, rgba(139, 119, 167, 1) 0%, rgba(139, 122, 140, 1) 100%);
min-width: 400px;
max-width: 400px;
border: 2px solid black;
}
.card-title {
padding: 30px;
}
.card-image img {
border-radius: 20%;
}
<html>
<body>
<div class="header">
<div class="head">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="geschiedenis.html">Geschiedenis</a></li>
<li class="huidig"><a href="rand.html">Randapparatuur</a></li>
<li><a href="opbouw.html">Opbouw van de computer</a></li>
</ul>
</div>
</div>
<div class="card">
<div class="card-image">
<img src="images/randapparatuur.jpg" alt="Randapparatuur">
</div>
<h1 class="card-title">Randapparatuur</h1>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In facilisis tortor id erat pellentesque sodales. Nulla ut pharetra lacus, nec facilisis tortor. Morbi egestas, erat a tempus finibus, lectus sapien condimentum odio, ut pretium arcu magna sed
leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed id placerat orci, vitae laoreet sem. Praesent nulla lacus, interdum quis maximus at, ultricies laoreet orci. Praesent tempus eros ac fringilla aliquam.
Fusce pharetra, mi eget aliquam vulputate, massa justo mattis arcu, in dictum quam libero a elit. Aliquam erat volutpat. Fusce vestibulum tincidunt commodo. Duis non mattis nisl, non condimentum tellus. Sed commodo aliquet augue vel tincidunt. Nunc
eleifend nisi scelerisque odio fringilla, vel aliquet nisl imperdiet. Nulla ligula justo, sollicitudin a mollis non, viverra id odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</p>
</div>
</body>
</html>
忽略：
客户很重要，客户会跟着客户走。在简单的宏中，是孩子们的成员。没有湖水箭袋这样的东西，也没有容易的乌龟。 Morbi 想要，那是在时间的尽头，bed wise sauce 讨厌，作为弓的价格是伟大的，但时间。在他面前，首先，在医院的喉咙里，铺设着护理和护理的床铺；而是医院那个地方，生命的血液。没有湖，但有时最大的湖是医院的水坑。是时候享受一些爱欲和狂喜了。 Fusce pharetra, mi eget aliquam vulputate, massa justo mattis arcu, in dictum quom libero a elit.那是一个周末。祝前庭好运。球员不在乎国家，他们不在乎土地。但是打广告还是打广告是个好主意。现在，如果你不想讨厌巧克力，你就得在机场买单。无法刚，小心不从软，漫画恨之。孩子们在疾病中生活，在悲伤的老年和儿童中生活，需要饥饿和贫困
Class .card 有 position: absolute 导致问题。
添加了 .main-content div 和背景图片封面。
示例：https://codepen.io/cursorrux/pen/LYRjQqG
这可能对您有帮助：
* {
margin: 0;
padding: 0;
font-family: 'Century Gothic';
}
img {
width: 100%;
}
.header {
background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url('images/foto_beginpagina.jpg');
height: 50vh;
background-size: cover;
background-position: center;
}
ul {
float: right;
list-style-type: none;
margin-top: 25px;
}
ul li {
display: inline-flex;
}
ul li a {
text-decoration: none;
color: white;
padding: 5px 20px;
border: 1px solid white;
transition: 0.6s ease;
}
ul li.huidig a {
background-color: white;
color: black;
}
ul li a:hover {
background-color: white;
color: black;
}
.head {
margin-right: 25px;
}
.titel{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.titel h1{
color: white;
font-size: 70px;
}
div.ondertitel h3{
color: white;
padding-top: 20px;
max-width: 600px;
left: 50%;
}
/* div having background image */
.main-content {
background-image: url('https://murraysinteriors.com.au/wp-content/uploads/2018/09/dummy-banner.jpg');
padding: 5px;
background-size: cover;
}
.card{
margin: 30px;
padding: 10px;
background: rgb(139,119,167);
background: radial-gradient(circle, rgba(139,119,167,1) 0%, rgba(139,122,140,1) 100%);
min-width: 400px;
max-width: 400px;
border: 2px solid black;
}
.card-title {
padding: 30px;
}
.card-image img {
border-radius: 20%;
}
<div class="header">
<div class="head">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="geschiedenis.html">Geschiedenis</a></li>
<li class="huidig"><a href="rand.html">Randapparatuur</a></li>
<li><a href="opbouw.html">Opbouw van de computer</a></li>
</ul>
</div>
</div>
<div class="main-content">
<div class="card">
<div class="card-image">
<img src="https://pixselo.com/wp-content/uploads/2018/03/dummy-placeholder-image-400x400.jpg" alt="Randapparatuur">
</div>
<h1 class="card-title">Randapparatuur</h1>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In facilisis tortor id erat pellentesque sodales. Nulla ut pharetra lacus, nec facilisis tortor. Morbi egestas, erat a tempus finibus, lectus sapien condimentum odio, ut pretium arcu magna sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed id placerat orci, vitae laoreet sem. Praesent nulla lacus, interdum quis maximus at, ultricies laoreet orci. Praesent tempus eros ac fringilla aliquam. Fusce pharetra, mi eget aliquam vulputate, massa justo mattis arcu, in dictum quam libero a elit. Aliquam erat volutpat. Fusce vestibulum tincidunt commodo. Duis non mattis nisl, non condimentum tellus. Sed commodo aliquet augue vel tincidunt. Nunc eleifend nisi scelerisque odio fringilla, vel aliquet nisl imperdiet. Nulla ligula justo, sollicitudin a mollis non, viverra id odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</p>
</div>
</div>
我正在为这张 CSS 卡而苦苦挣扎，我想把它放在背景图片上，但我不知道怎么做，我已经尝试过定位 我不小心把背景图片放在了header，我把它改成了div，还是不行 有人可以帮忙吗？
* {
margin: 0;
padding: 0;
font-family: 'Century Gothic';
}
img {
width: 100%;
}
.header {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(images/foto_beginpagina.jpg);
height: 100vh;
background-size: cover;
background-position: center;
}
ul {
float: right;
list-style-type: none;
margin-top: 25px;
}
ul li {
display: inline-block;
}
ul li a {
text-decoration: none;
color: white;
padding: 5px 20px;
border: 1px solid white;
transition: 0.6s ease;
}
ul li.huidig a {
background-color: white;
color: black;
}
ul li a:hover {
background-color: white;
color: black;
}
.head {
margin-right: 25px;
}
.titel {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.titel h1 {
color: white;
font-size: 70px;
}
div.ondertitel h3 {
color: white;
padding-top: 20px;
max-width: 600px;
left: 50%;
}
.card {
position: absolute;
margin: 30px;
padding: 10px;
background: rgb(139, 119, 167);
background: radial-gradient(circle, rgba(139, 119, 167, 1) 0%, rgba(139, 122, 140, 1) 100%);
min-width: 400px;
max-width: 400px;
border: 2px solid black;
}
.card-title {
padding: 30px;
}
.card-image img {
border-radius: 20%;
}
<html>
<body>
<div class="header">
<div class="head">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="geschiedenis.html">Geschiedenis</a></li>
<li class="huidig"><a href="rand.html">Randapparatuur</a></li>
<li><a href="opbouw.html">Opbouw van de computer</a></li>
</ul>
</div>
</div>
<div class="card">
<div class="card-image">
<img src="images/randapparatuur.jpg" alt="Randapparatuur">
</div>
<h1 class="card-title">Randapparatuur</h1>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In facilisis tortor id erat pellentesque sodales. Nulla ut pharetra lacus, nec facilisis tortor. Morbi egestas, erat a tempus finibus, lectus sapien condimentum odio, ut pretium arcu magna sed
leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed id placerat orci, vitae laoreet sem. Praesent nulla lacus, interdum quis maximus at, ultricies laoreet orci. Praesent tempus eros ac fringilla aliquam.
Fusce pharetra, mi eget aliquam vulputate, massa justo mattis arcu, in dictum quam libero a elit. Aliquam erat volutpat. Fusce vestibulum tincidunt commodo. Duis non mattis nisl, non condimentum tellus. Sed commodo aliquet augue vel tincidunt. Nunc
eleifend nisi scelerisque odio fringilla, vel aliquet nisl imperdiet. Nulla ligula justo, sollicitudin a mollis non, viverra id odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</p>
</div>
</body>
</html>
忽略： 客户很重要，客户会跟着客户走。在简单的宏中，是孩子们的成员。没有湖水箭袋这样的东西，也没有容易的乌龟。 Morbi 想要，那是在时间的尽头，bed wise sauce 讨厌，作为弓的价格是伟大的，但时间。在他面前，首先，在医院的喉咙里，铺设着护理和护理的床铺；而是医院那个地方，生命的血液。没有湖，但有时最大的湖是医院的水坑。是时候享受一些爱欲和狂喜了。 Fusce pharetra, mi eget aliquam vulputate, massa justo mattis arcu, in dictum quom libero a elit.那是一个周末。祝前庭好运。球员不在乎国家，他们不在乎土地。但是打广告还是打广告是个好主意。现在，如果你不想讨厌巧克力，你就得在机场买单。无法刚，小心不从软，漫画恨之。孩子们在疾病中生活，在悲伤的老年和儿童中生活，需要饥饿和贫困
Class .card 有 position: absolute 导致问题。
添加了 .main-content div 和背景图片封面。
示例：https://codepen.io/cursorrux/pen/LYRjQqG
这可能对您有帮助：
* {
margin: 0;
padding: 0;
font-family: 'Century Gothic';
}
img {
width: 100%;
}
.header {
background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url('images/foto_beginpagina.jpg');
height: 50vh;
background-size: cover;
background-position: center;
}
ul {
float: right;
list-style-type: none;
margin-top: 25px;
}
ul li {
display: inline-flex;
}
ul li a {
text-decoration: none;
color: white;
padding: 5px 20px;
border: 1px solid white;
transition: 0.6s ease;
}
ul li.huidig a {
background-color: white;
color: black;
}
ul li a:hover {
background-color: white;
color: black;
}
.head {
margin-right: 25px;
}
.titel{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.titel h1{
color: white;
font-size: 70px;
}
div.ondertitel h3{
color: white;
padding-top: 20px;
max-width: 600px;
left: 50%;
}
/* div having background image */
.main-content {
background-image: url('https://murraysinteriors.com.au/wp-content/uploads/2018/09/dummy-banner.jpg');
padding: 5px;
background-size: cover;
}
.card{
margin: 30px;
padding: 10px;
background: rgb(139,119,167);
background: radial-gradient(circle, rgba(139,119,167,1) 0%, rgba(139,122,140,1) 100%);
min-width: 400px;
max-width: 400px;
border: 2px solid black;
}
.card-title {
padding: 30px;
}
.card-image img {
border-radius: 20%;
}
<div class="header">
<div class="head">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="geschiedenis.html">Geschiedenis</a></li>
<li class="huidig"><a href="rand.html">Randapparatuur</a></li>
<li><a href="opbouw.html">Opbouw van de computer</a></li>
</ul>
</div>
</div>
<div class="main-content">
<div class="card">
<div class="card-image">
<img src="https://pixselo.com/wp-content/uploads/2018/03/dummy-placeholder-image-400x400.jpg" alt="Randapparatuur">
</div>
<h1 class="card-title">Randapparatuur</h1>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In facilisis tortor id erat pellentesque sodales. Nulla ut pharetra lacus, nec facilisis tortor. Morbi egestas, erat a tempus finibus, lectus sapien condimentum odio, ut pretium arcu magna sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed id placerat orci, vitae laoreet sem. Praesent nulla lacus, interdum quis maximus at, ultricies laoreet orci. Praesent tempus eros ac fringilla aliquam. Fusce pharetra, mi eget aliquam vulputate, massa justo mattis arcu, in dictum quam libero a elit. Aliquam erat volutpat. Fusce vestibulum tincidunt commodo. Duis non mattis nisl, non condimentum tellus. Sed commodo aliquet augue vel tincidunt. Nunc eleifend nisi scelerisque odio fringilla, vel aliquet nisl imperdiet. Nulla ligula justo, sollicitudin a mollis non, viverra id odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</p>
</div>
</div>