背景图像无法正常显示

我正在尝试为标题设置背景图像。这就是我想要它看起来像：背景图像无法正常显示

这就是我得到：

所以，在底端一个小怪异条。这里是我的代码：

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; 
}

我曾尝试添加一个大小属性的背景下，像这样：

背景尺寸：100％100像素;

而这就是我如何得到底部的小条。没有这个财产，我什么也得不到。此外，虽然我已将宽度设置为100vw，但页眉并不像页面那么长。感谢你的时间。

来源

2017-03-23 Paul

background-size：100％100px;这不应该是100％100％？不是100％100px; – jmag

尝试将背景大小的值更改为100％宽度和100％高度以将其完全拉伸。背景大小：100％100％;另外，检查是否给它的高度：10vh实际上会给你的预期容器的10％。如果是这样，请尝试将其更改为100vh，看看它是否会影响它，然后进行相应调整， – jmag

我尝试了您的代码，并将其正确显示。它可能是你的浏览器显示奇怪。尝试在不同的浏览器上运行它。此外，你已经有了很好的答案。尝试他们，而你在这。 – jmag

删除高度#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; 
}

来源

2017-03-23 13:17:10

谢谢。没有什么变化。 – Paul

添加填充顶部和底部的头部，直到你把所有的图像显示，与空的空间的问题，你不告诉浏览器如何显示图像，添加更多内容或添加填充顶部和底部。

来源

2017-03-23 13:37:54

我做了一些修改，以你的头：

#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！

来源

2017-03-23 13:44:32 meko

您的代码为class="cf"和id="menu"代码为<nav class="cf" id="menu">在body部分的HTML代码？

那里可能有错误。一探究竟。

来源

2017-03-23 13:52:48

背景图像无法正常显示

回答

相关问题