我希望“幻灯片”和“目标”div 在“mainheader”、“maincontent”和“content”div 的顶部有彩色背景。但背景不可见。这是我的代码。幻灯片和目标 div 中的文本可见，但背景不可见。
HTML
<!Doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div class="content">
<header class="mainheader">
<a href="#">
<img src="#" alt=""/><h1>HEADER</h1>
</a>
<nav>
<ul>
<li>blank</li>
<li>blank</li>
<li>blank</li>
<li>blank</li>
</ul>
</nav>
</header><!--mainheader-->
<div class="maincontent">
<div name="slideshow">
<img sr ="#" alt=""/><h2>Slideshow</h2>
</div><!--slideshow-->
<div name="destinations">
<h2>Destinations</h2>
<div><!--destination-->
</div><!--maincontent-->
</div> <!--CONTENT-->
</body>
</html>
CSS
body {
align-content: center;
margin: 0px;
}
.content {
margin: 0px;
width: 100%;
height: 1000px;
background-color: brown;
}
.mainheader {
width: 100%;
height: 30%;
color: white;
background-color: #4949bf;
align-self: center;
}
.mainheader nav ul li {
list-style: none;
display: inline;
}
.maincontent {
background-image: url(img/transparent.png);
width: 80%;
position: relative;
margin-left: 10%;
margin-right: 10%;
margin-top: -10%;
}
.slideshow {
box-shadow: green;
width: 70px;
height: auto;
position: absolute;
}
.destinations {
background-color: orange;
width: 30px;
height: auto;
position: absolute;
}
最佳答案
您的 html 不正确。而不是 class你用过name .更改这些行 <div name="slideshow"> <div name="destinations">像这样<div class="slideshow"> <div class="destinations"> .
并更改box-shadow至 background-color
.slideshow {
box-shadow: green;
像这样
.slideshow {
background-color: green;
关于html - 无法使一个 div 的背景在其他两个 div 之上可见，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35751361/