我正在尝试为标题设置背景图片。这就是我想要的样子:
这就是我得到的:
所以,底端有一个很小的怪异条带。这是我的代码:
HTML
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>title</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript" src="jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="JavaScript2.js"></script>
</head>
<body>
<div id="header">
<nav class="cf" id="menu">
<ul>
<li><a href="about.html">ABOUT</a></li>
<li><a href="gallery.html">FOLK</a></li>
<li><a href="contact.html">JAZZ</a></li>
<li><a href="shop.html">SIGNATURE</a></li>
<li><a href="contact.html">NYLON</a></li>
<li><a href="shop.html">CONTACT</a></li>
</ul>
</nav>
</div>
<div id="container">
<div id="logo">
<img id="rays" src="Images/PNGs/rayons.png">
<img id="base" src="Images/PNGs/baseLogo.png">
<img id="roue" src="Images/PNGs/roue.png">
<img id="letters" src="Images/PNGs/title.png">
</div>
</div>
<div id="footer">
</div>
<script type="text/javascript" src="JavaScript2.js"></script>
</body>
</html>
CSS
html, body {
margin: 0px;
padding: 0px;
height: 100vh;
}
#header {
position: absolute;
background-image: url("Images/menu.jpg");
width: 100vw;
height: 10vh;
opacity: 1;
z-index: 6;
background-size: 100% 100px;
}
我尝试将大小属性添加到后台,如下所示:
background-size:100%100px;
这就是我如何获得底部的小条带。如果没有那个属性,我什么也得不到。此外,虽然我已将宽度设置为100vw,但标题不会与页面一样长。谢谢你的时间。
答案 0 :(得分:3)
我对标题进行了一些更改:
#header {
/*position: absolute;*/
background-image: url("Images/menu.jpg");
/*width: 100vw;
height: 10vh;
opacity: 1;
z-index: 6;*/
background-size:cover;/*added this*/
padding: 5px;/*added this*/
}
JSfiddle:https://jsfiddle.net/sg7dfpzj/
希望有所帮助,cheerio!
答案 1 :(得分:1)
删除#header
类
#header {
position: absolute;
background-image: url("Images/menu.jpg");
width: 100vw;
/*height: 10vh;*//*Remove this*/
opacity: 1;
z-index: 6;
background-size: 100% 100px;
}
答案 2 :(得分:0)
为标题添加填充顶部和底部,直到显示所有图像,空格的问题,您不告诉浏览器如何显示图像, 添加更多内容或添加填充顶部和底部。
答案 3 :(得分:0)
HTML代码class="cf"
部分中id="menu"
行<nav class="cf" id="menu">
和body
的代码在哪里?
那里可能有错误。看看吧。