如何將 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>
忽略：Lorem ipsum dolor sit amet，consectetur adipiscing elit。 在 facilis tortor id erat pellentesque sodales。 Nulla ut pharetra lacus，nec facilisis 侵權。 Morbi egestas, erat a tempus finibus, lectus sapien condimentum odio, ut pretium arcu magna sed leo。 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 前庭 tincidunt commodo。 Duis non mattis nisl，非 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 居民 morbi tristique senectus et netus et malesuada 名聲 ac turpis egestas
2 個解決方案
解決方案1
1 已采納 2020-12-21 13:15:00
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>
解決方案2
-1 2020-12-21 13:00:51
url(images/foto_beginpagina.jpg); 這是錯誤的
url("images/foto_beginpagina.jpg"); 這是對的
因為 url 采用單quote('...')或雙quote("...")的路徑
CSS動畫，將鼠標懸停時在背景圖像上放置一個顏色層
[英]Css animation to put a color layer over a background image while hovered
如何在CSS對角切片中創建一張帶有圖像作為背景的卡片
[英]How to create a card with image as background in CSS diagonally sliced
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.