html - CSS 背景图片未加载/损坏

Question

我无法加载背景图片。这是我所做的:

第一次尝试:

html { 
  background: url(../images/bg1.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

问题:Chrome 找到图像(=路径有效)但在开发工具中显示“损坏”图标

第二次尝试:

html { 
  background: url(../images/bg2.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

问题:路径有效，chrome 开发工具显示图像(= 没有“损坏”图标)但图像在实际网站上不可见。只是一个空白的背景。

第三次尝试:

html { 
  background-image: url(../images/bg2.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

问题:我将 background: 更改为 background-image。该图像现在甚至不加载(= 不显示在 chrome 开发工具中)。

注意:bg1 和 bg2 似乎是有效的，我可以在标准的 Windows 照片查看器应用程序中查看它们。

我很困惑，没有其他的css文件覆盖规则，它只是一个页面，上面有一些文字。问题出在哪里？

Answer 1

那是因为您说 html{...} 但您希望 Body 显示墙纸。 在这里试试:

           body{
            background: url(../images/bg2.jpg) no-repeat center center fixed;
            -moz-background-size: cover;
            background-size: cover;
            } 

---

现在您的网站应该显示所有尺寸的图像