Question

无论我尝试什么，我的背景图片都没有出现。我想让它跨越整个背景空间。

这是我的CSS：

body {
    background-image: url('../Project2/images/water.jpg') no-repeat center top;
    background-size: cover;
    font-family:    Lucida Grande, Lucida Sans, Geneva, Arial, Helvetica, sans-serif;
    font-size:      100%;
    *font-size:     80%;
    width: 1000px;
    margin: 0 auto;
    display: block; 
}

Answer 1

您使用的background-image属性只占用一个值，即图片的网址，但您插入了多个值。

要执行您想要的操作，请将background-image更改为background，这是background-image的简写版本，并允许您包含多个属性值。

background-image

background

Answer 2

调整此CSS Trick的代码，确保使用

background（而非background-image）并与cover属性结合使用。

我仅为此示例添加了div的代码（您可以删除它以应用于body，以及删除height属性）

假设这是您的文件夹结构

Project
  |_ index.html
  |_ images/
  |        |_water.jpg
  |_ css/
        |_style.css

然后网址应为：url("../images/water.jpg")

div {
  background: url("http://placehold.it/400x400") no-repeat center top fixed;  
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  
  font-family: Lucida Grande, Lucida Sans, Geneva, Arial, Helvetica, sans-serif;
  font-size: 100%;
  width: 1000px;
  margin: 0 auto;
  display: block;
  height: 200px;
}

<div>hello world</div>

Answer 3

尝试这样的事情

body {
    background-image: url("paper.gif");
    background-repeat: no-repeat;
}

为什么我的背景不显示？

3 个答案: