0

我正在尝试在导航栏上方创建全宽图像，但我什至无法将图像显示在屏幕上。这是我的简单 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 到了我的浏览器，可以在我的资源中点击它，所以路径没有问题。屏幕仍然是空白的，什么也没有显示。任何帮助都是极好的。

4

5 回答 5

3

This is because height:100% is functionally useless, and your div resultingly has no height.

If you give the div a fixed height, the image should appear as expected.

Alternatively if you want the background image to apply to the background of the page, you can apply it to the <html> element and avoid the whole wrapper, 100% debacle.

html {
     background-image: url(../assets/bridge.jpg);
     background-repeat: no-repeat;
     background-size: 100%;
}
于 2013-05-03T10:51:44.623 回答
1

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;
}
于 2013-05-03T10:56:46.970 回答
0

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

于 2013-05-03T10:47:02.427 回答
0

It is possible that the image isn't showing because there is no content within the div and therefore it's size is 0. Try setting the width and height to a set size, something like 200px to test out this theory. Also I would change your code to:

<div class="wrapper"> </div>
于 2013-05-03T10:50:23.213 回答
0

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

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

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

于 2013-05-03T10:59:12.950 回答