Question

我正在尝试在导航栏上方创建一个全宽图像，但我甚至无法将图像显示在屏幕上。这是我简单的HTML：

<html>
  <body>
    <div class="wrapper" />
  </body>
</html>

和css：

.wrapper {
  background-image: url(../assets/bridge.jpg);
  background-repeat: no-repeat;
  background-size: 100%;
  width: 100%;
  height: 100%;
}

我看到jpg将它发送到我的浏览器并可以在我的资源中点击它，所以路径没有问题。屏幕仍然是空白的，没有显示任何内容。任何帮助都会很棒。

Answer 1

这是因为height:100%在功能上没用，而你的div因此没有高度。

如果你给div一个固定的高度，图像应该是appear as expected。

或者，如果您希望背景图像应用于页面背景，您可以将其应用于<html>元素并避免整个包装，100％崩溃。

html {
     background-image: url(../assets/bridge.jpg);
     background-repeat: no-repeat;
     background-size: 100%;
}

Answer 2

http://jsfiddle.net/dolours/JcxLm/2/给出一个特定的高度，高度100％是无意义的

.wrapper {
  background-image: url(../assets/bridge.jpg);
  background-repeat: no-repeat;
  background-size: 100%;
  width: 100%;
  height: 50px;
}

Answer 3

试试这个<div class="wrapper"></div>

Answer 4

图像可能没有显示，因为div中没有内容，因此它的大小为0.尝试将宽度和高度设置为设置大小，例如200px，以测试该理论。我还会将您的代码更改为：

<div class="wrapper"> </div>

Answer 5

你可以使用css作为body标签，body的css将是这样的：

body{
   background: url(../assets/bridge.jpg) center top no-repeat;
}

如果您只想要背景图片，我认为这对您有用。