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 dev工具显示图像（=没有“损坏”图标）但图像在实际网站上不可见。只是一个空白背景。

第三次尝试：

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 dev工具中）。

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

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

Answer 1

那是因为你说html {...}但是你想要Body显示壁纸。试试这里：

＆＃13;

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

＆＃13;

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

Answer 2

这里有一点快速研究。背景图像没有简写背景图像。但第一个元素需要是背景颜色。第二个是网址 thrid background-repeat 第四是附件

对于你的情况，这将是

background: #FFF url('../images/bg1.jpg') no-repeat center fixed;

Answer 3

这是我的CSS代码

.body_background {
background-image: url(body_background.gif);
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover; 
background-size: cover;
}

这是我的HTML代码，可以正常工作。

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="PreventQuestionLeak.css">
</head>
<body class="body_background">

</body>
</html>

Answer 4

我有一些CSS在Safari的Mac上运行良好。但是在Chrome和Firefox开发人员版中被破坏了。

Safari版本

正确的渲染：

Firefox版

残破的渲染

Chrome版本

Chrome渲染

对我来说，我发现问题在于，如果将url放在background属性中，CSS解释器就坏了。我将该网址移出了背景，并使用了background-image：url（），此后它在所有3种浏览器中均可使用。

此MDN link提供了灵感。

之前（损坏）

card-1 {
    background: linear-gradient(rgba(0,0,0, .6),rgba(0,0,0, .5)), url(images/pricing-card-bg.jpeg) center no-repeat /cover;
    box-shadow: 7px 18px 50px #555;
}

之后（固定）

card-1 {
    background-image:linear-gradient(rgba(0,0,0, .6),rgba(0,0,0, .5)), url(images/pricing-card-bg.jpeg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    box-shadow: 7px 18px 50px #555;
}

脚注：

我后来在W3Schools上发现了this：

background: bg-color bg-image position/bg-size bg-repeat bg-origin
bg-clip bg-attachment initial|inherit;

所以对我来说，正确的速记应该是：

background: linear-gradient(rgba(0,0,0, .6),rgba(0,0,0, .5)), url(images/pricing-card-bg.jpeg) center  /cover no-repeat;

no-repeat和/cover是错误的方法。只是Safari更宽容了。

CSS背景图片无法加载/损坏

4 个答案: