背景图片无法正常显示

时间:2017-03-23 13:11:40

标签: html css background-image css-position display

我正在尝试为标题设置背景图片。这就是我想要的样子:

enter image description here

这就是我得到的:

enter image description here

所以,底端有一个很小的怪异条带。这是我的代码:

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,但标题不会与页面一样长。谢谢你的时间。

4 个答案:

答案 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的代码在哪里?

那里可能有错误。看看吧。