Question

在我正在使用的html文件中：

<body style="background-image:url(images/back.png); ">
....
</body>

和我的css文件：

body {

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  color:#fff;
    background-color:#333;
    font-family: 'Open Sans',Arial,Helvetica,Sans-Serif;
}

当我在谷歌浏览器上打开网页时，它工作正常，但在Firefox上，图像不会出现。如果我从Css文件调用图像而不是从html文件调用图像，则会发生同样的事情。

我获得了更多信息，当我在firefox中使用我们的控制台时，我收到此错误：

Image corrupt or truncated.

Answer 1

尝试将以下内容添加到您的正文CSS代码中。

background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;

Answer 2

我发现了这个：https://bugzilla.mozilla.org/show_bug.cgi?id=941823

基本上大的图像可能会导致Firefox上出现“图像损坏或截断”错误，因此我将图像缩小为7494x3891并且工作正常。

Answer 3

可能是你的图像是当前文件。我尝试使用您的代码替换一个在线图像，它也适用于chrome和firefox。检查示例[https://jsfiddle.net/wdhzujqn/] 1

Bootstrap背景图像不显示使用Firefox

3 个答案: