http://imgur.com/a/Aqm3y 标题和导航栏之间有一个空间，每次我插入图像时它都会拆分页面。我希望图像实际上位于背景图像上，而不是形成空白区域。
img {
margin: 10px;
height: 170px;
width: 170px;
box-shadow: rgba(0, 0, 0, 0.2) 10px 10px;
}
@font-face {
font-family: Moon Light;
src: url(MoonLight.otf);
}
#header {
background-position: top;
margin: 0;
padding: 10px;
text-align: center;
color: #ffb400;
}
h1 {
font-family: Moon Light;
background-image: url(polygon.jpg);
margin: 0;
}
p {
color: white;
font-family: Moon Light;
text-align: center;
padding: 16%;
font-weight: bold;
font-size: 30px;
background-image: url(polygon.jpg);
margin: 0;
}
#footer {
font-family: Moon Light;
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
border-bottom: 1px solid #ff3400;
border-top: 1px solid #ff3400;
background-color: #ffb400;
color: #ff004b;
}
h3 {
text-align: center;
padding: 7%;
background-image: url(polygon.jpg);
margin: 0;
font-family: Moon Light;
color: #ffb400;
font-size: 30px;
}
ul {
font-family: Moon Light;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #ff3400;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #ff004b;
}
.active {
background-color: #ffb400;
}<!DOCTYPE HTML>
<html lang="en">
<head>
<title>LOS BANTOS CUSTOMS</title>
<meta charset="utf-8">
<link rel="stylesheet" href="DERENTWURF.css">
</head>
<BODY>
<div id=header>
<h1> MODDING YOUR DREAM CAR INTO REALITY! </h1></div>
<ul class="side-nav">
<li><a class="active" href="HOMIEPAGE1.html">HOME</a></li>
<li><a href="SERVICES.html">SERVICES</a></li>
<li><a href="GALLERY.html">GALLERY</a></li>
<li><a href="ABOUTUS.html">ABOUT US</a></li>
<li><a href="CONTACT.html">CONTACT</a></li>
</ul>
<p> Welcome to Los Bantos Customs! At L.B. we modify cars to your liking and provide you with our high-end services such as window tinting, respraying, window tinting and much more.
<div id="container">"<img src="https://scontent.cdninstagram.com/hphotos-xfp1/t51.2885-15/s640x640/sh0.08/e35/11917979_826159337505466_283957219_n.jpg" alt="amg">
<img src="https://scontent.cdninstagram.com/hphotos-xap1/t51.2885-15/s640x640/sh0.08/e35/12237239_1004549372948855_1839675769_n.jpg" alt="purple honda">
<img src="https://scontent.cdninstagram.com/hphotos-xpt1/t51.2885-15/s640x640/sh0.08/e35/11934798_1620845201507358_1198463095_n.jpg" alt="MINT MOD">
<img src="https://scontent.cdninstagram.com/hphotos-xtf1/t51.2885-15/s640x640/sh0.08/e35/11348091_579493905523184_1921894326_n.jpg" alt="Sliver mod">
<img src="https://scontent.cdninstagram.com/hphotos-xat1/t51.2885-15/s640x640/sh0.08/e35/11350873_1516346318690198_385687089_n.jpg" alt="subaru red mod">
<img src="https://scontent.cdninstagram.com/hphotos-xpt1/l/t51.2885-15/s640x640/sh0.08/e35/12338587_567880666702430_1666379795_n.jpg" alt="FWD SUK">
<img src="https://scontent.cdninstagram.com/hphotos-xpt1/t51.2885-15/s640x640/sh0.08/e35/12141836_701952009904466_2099670799_n.jpg" alt="SHIRO DEVIL">
<img src="https://scontent.cdninstagram.com/hphotos-xat1/t51.2885-15/s640x640/sh0.08/e35/12139887_1662246847325829_754159365_n.jpg" alt="BLUE WING">
<img src="https://scontent.cdninstagram.com/hphotos-xap1/t51.2885-15/s640x640/sh0.08/e35/11350837_183170668693850_989498919_n.jpg" alt="SUPRA"></div>
<p>
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="Valid CSS!" />
</a>
</p>
<div id=footer>
Nia Daniels/ FINAL EXAM/ CIST1510-Web Development I (21401)
</div>
</body>
</html>最佳答案
如果您在 header 中使用 img 标签，您的问题是 10px 的填充。尝试删除它，看看它是否有效。
编辑:
至于背景图片上的汽车，您需要重新构建您的 CSS。我会将背景图片放在 BODY 上，然后将其从您的标题中删除。
关于html - 如何去掉标题上的空白区域和图像所在的位置？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34296711/