我现在正在努力理解css/html。背景图像只显示当我把它放在css的主体，但我更愿意把它放在一个div。也即使当它的工作，我不能把任何其他图像在它上面，它只是简单地不显示…我检查了路径和所有东西，它很好，我试着把img放在html中，试着z-index值，仍然没有。我不知道发生了什么
有人能帮我一下吗?
My html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
<title>ONLINE FILM FESTIVAL</title>
</head>
<body>
<nav>
<div class="logo">
<h4>Online Film Festival</h4>
</div>
<ul class="nav-links">
<li><a href="index1.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<div class="background-image"></div>
<script src="app.js"></script>
</body>
</html>
My css code
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
nav {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: #241825;
font-family: 'Poppins', sans-serif;
}
.logo {
color: rgb(226, 226, 226);
text-transform: uppercase;
letter-spacing: 5px;
font-size: 20px;
}
.nav-links {
display: flex;
width: 30%;
justify-content: space-around;
}
.nav-links li {
list-style: none;
}
.nav-links a {
color: rgb(226, 226, 226);
text-decoration: none;
letter-spacing: 3px;
font-weight: bold;
font-size: 14px;
}
.burger {
display: none;
cursor: pointer;
}
.burger div {
width: 25px;
height: 3px;
background-color: rgb(226, 226, 226);
margin: 5px;
transition: all 0.5s ease;
}
/* Tablet zone */
@media screen and (max-width:1024px) {
.nav-links {
width: 100%;
}
}
/* Mobile phone zone */
@media screen and (max-width:768px) {
body {
overflow-x: hidden;
}
.nav-links {
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background-color: #241825;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.nav-links a {
font-size: 20px;
line-height: 3.5;
}
.nav-links li {
opacity: 0;
}
.burger {
display: block;
}
}
.nav-active {
transform: translateX(0%);
}
@keyframes navLinkFade {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0px);
}
}
.toggle .line1 {
transform: rotate(-45deg) translate(-5px, 6px);
}
.toggle .line2 {
opacity: 0;
}
.toggle .line3 {
transform: rotate(45deg) translate(-5px, -6px);
}
.background-image {
background-image: linear-gradient(to bottom,
rgba(0, 0, 0, 0) 0%,
rgba(17, 17, 17, 0.6) 100%),
url(images/picc1.jpg);
background-size: cover;
color: #fff;
background-repeat: no-repeat;
z-index: 0;
height: 100%;
width: 100%;
}
/* .main__img--container {
text-align: center;
height: 100%;
width: 100%;
}
#main__img {
height: 100%;
width: 100%;
} */
/*
body {
background-image: linear-gradient(to bottom,
rgba(0, 0, 0, 0) 0%,
rgba(17, 17, 17, 0.6) 100%),
url(images/picc1.jpg);
background-size: cover;
color: #fff;
background-repeat: no-repeat;
z-index: 0;
}
.img1 {
background-image: url(/images/pic1.png);
z-index: 999;
width: 300px;
height: 500px;
} */
从。main__img——container开始的最后几行被注释了，它只是我尝试过的，没有工作，除了从"body {}"…(
a)您的代码中没有<img>标记(?)。
b)您的background-image元素没有内容，因此其高度默认为零，即背景图像也将具有高度零，因此将保持不可见。为了使其可见，您需要为该元素设置height。顺便说一句，百分比高度只有在父元素的高度被定义，或者这里有"创建"的内容时才有意义。高度。
你的。background-image类指定了什么高度的100% ?如果你想填满屏幕，可以尝试在body元素上添加高度100vh。
或者在元素上添加最小高度，例如400px。
Works for me
编辑:
<div class="background-image">
<div class="img-wrap">
<img src="https://images.pexels.com/photos/9869132/pexels-photo-9869132.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
</div>
</div>