如何将 CSS 卡放在背景图像上
[英]How to put CSS card over background image
问题描述
I'm struggling with this CSS card, I want it over the background image, but I don't know how, I already tried positioning I accidentally placed the background image in the header, but I changed it to a div but it still doesn't work Can someone help?
我正在为这张 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>
ignore: Lorem ipsum dolor sit amet, consectetur adipiscing elit.忽略：Lorem ipsum dolor sit amet，consectetur adipiscing elit。 In facilisis tortor id erat pellentesque sodales.在 facilis tortor id erat pellentesque sodales。 Nulla ut pharetra lacus, nec facilisis tortor. Nulla ut pharetra lacus，nec facilisis 侵权。 Morbi egestas, erat a tempus finibus, lectus sapien condimentum odio, ut pretium arcu magna sed leo. 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; Faucibus orci luctus et ultrices posuere cubilia curae 中的前庭前庭； Sed id placerat orci, vitae laoreet sem. Sed id placerat orci, vitae laoreet sem。 Praesent nulla lacus, interdum quis maximus at, ultricies laoreet orci. Praesent nulla lacus, interdum quis maximus at, ultricies laoreet orci。 Praesent tempus eros ac fringilla aliquam. Praesent tempus eros ac fringilla aliquam。 Fusce pharetra, mi eget aliquam vulputate, massa justo mattis arcu, in dictum quam libero a elit. Fusce pharetra，mi eget aliquam vulputate，massa justo mattis arcu，in dictum quam libero a elit。 Aliquam erat volutpat. Aliquam erat volutpat。 Fusce vestibulum tincidunt commodo. Fusce 前庭 tincidunt commodo。 Duis non mattis nisl, non condimentum tellus. Duis non mattis nisl，非 condimentum Tellus。 Sed commodo aliquet augue vel tincidunt. Sed commodo aliquet augue vel tincidunt。 Nunc eleifend nisi scelerisque odio fringilla, vel aliquet nisl imperdiet. Nunc eleifend nisi scelerisque odio fringilla, vel aliquet nisl imperdiet。 Nulla ligula justo, sollicitudin a mollis non, viverra id odio. Nulla ligula justo, sollicitudin a mollis non, viverra id odio。 Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas Pellentesque 居民 morbi tristique senectus et netus et malesuada 名声 ac turpis egestas
2 个解决方案
解决方案1
1 已采纳 2020-12-21 13:15:00
Class .card having position: absolute which cause the issue. Class .card具有position: absolute导致问题。
Added .main-content div with background image cover.添加了带有背景图片封面.main-content div。
Example : https://codepen.io/cursorrux/pen/LYRjQqG示例： https://codepen.io/cursorrux/pen/LYRjQqG
May be this helps you:这可能对您有帮助：
* { 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>
解决方案2
-1 2020-12-21 13:00:51
url(images/foto_beginpagina.jpg); This is wrong这是错误的
url("images/foto_beginpagina.jpg"); This is correct这是对的
because url takes path with single quote('...') or double quote("...")因为 url 采用单quote('...')或双quote("...")的路径
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.