我试图在我的背景图像 (class="divider-clouds") 底部放置一个带有一些天空的分隔线。出于某种原因，它们只是不会显示 - 似乎云隐藏在背景图像后面。
我一直在尝试使用 z-index 来让云朵出现在背景图像之上。但似乎也没有帮助。我错过了什么？？
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>TurboTobias</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<section id="hero-section">
<div class="row">
<div class="column hjemmeside-til-skyerne">
<h1>Vil du have
<div class="h1-enhanced">raketfart</div>
<div class="h1-smaller">på din hjemmeside?</div>
</h1>
<span class="sub-h1">Jeg ta'r din hjemmeside til skyerne!</span>
</div>
<div class="column">
<h2>Column 2</h2>
<p>Some text..</p>
</div>
<div class="divider-clouds"></div>
</div>
</section>
</body>
</html>
CSS:
body {
background: #fff;
color: #333333;
height: 100vh;
margin: 0;
box-sizing: border-box;
font-family: open sans,Arial,sans-serif;
}
#hero-section {
background-image: url(https://turbotobias.dk/wp-content/uploads/2019/07/Light-Above-clouds-HD-TurboTobias.jpg);
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
z-index: 1;
position: relative;
}
.row {
height: 100vh;
width: 80%;
max-width: 1080px;
margin: auto;
display: flex;
z-index: 1;
}
.hjemmeside-til-skyerne {
display: flex;
align-self: center;
align-items: center;
flex-direction: column;
}
.hjemmeside-til-skyerne h1 {
font-weight: 700;
font-size: 60px;
color: #303030!important;
line-height: 1em;
text-transform: uppercase;
}
.h1-enhanced {
font-weight: 900;
font-size: 120%;
}
.h1-smaller {
font-size: 70%;
}
.sub-h1 {
font-size: 24px;
color: #303030;
font-weight: 400;
}
.divider-clouds {
background-image: url(https://turbotobias.dk/wp-content/uploads/2019/07/clouds-divider.svg);
background-size: cover;
background-position: center top;
bottom: 0;
height: 100px;
position: absolute;
z-index: 10;
}
我希望云显示在底部，高度为 100 像素。
最佳答案
您应该在 .divider-clouds 元素样式上添加一个 100% 的 with。
关于css - 图像未显示/z-index 未按预期工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57125119/