CSS - 背景尺寸：封面；不能在 Firefox 中工作答案

【问题标题】：CSS - background-size: cover; not working in FirefoxCSS - 背景尺寸：封面；不能在 Firefox 中工作
【发布时间】：2014-07-29 01:44:51
【问题描述】：

body{
    background-image: url("./content/site_data/bg.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    font-family: 'Lobster', cursive;
}

在 Firefox 浏览器上检查：http://demo.jayantbhawal.in，而不是在宽屏模式下。

该代码适用于 Chrome（Android + PC）甚至是普通的 Android 浏览器，但不适用于 Firefox（Android + PC）。有什么好的替代品吗？为什么它仍然不起作用？谷歌搜索了很多次这个问题，但似乎没有其他人有这个问题。只有我吗？无论如何，我该如何解决？关于它也有很多问题，但没有一个提供合法的解决方案，所以有人可以告诉我他们是否有 background-size: cover;火狐也有问题？

所以基本上告诉我三件事： 1. 为什么会这样？ 2. 有什么好的替代品？ 3. 你也有这种情况吗？当然是在 Firefox 浏览器上。

Chrome 版本 35.0.1916.114 m 火狐浏览器版本 29.0.1

注意：我可能已经在尝试修复它，所以有时您可能会看到一个完全奇怪的页面。稍等片刻，重新加载。

【问题讨论】：

Why doesn't -moz-background-size:cover work in Firefox?的可能重复

标签： android html css firefox background-image

【解决方案1】：

在 Firefox 3.6 中添加了背景大小，但需要 -moz 供应商前缀。

使用

-webkit-background-size: 100% 100%;           /* Safari 3.0 */
     -moz-background-size: 100% 100%;           /* Gecko 1.9.2 (Firefox 3.6) */
       -o-background-size: 100% 100%;           /* Opera 9.5 */
          background-size: 100% 100%;           /* Gecko 2.0 (Firefox 4.0) and other CSS3-compliant browsers */

【讨论】：

我确实尝试过使用前缀，但我停止使用它们，这可能是练习，但我没有遇到任何不在最新浏览器中使用它们的问题。如果我这样做，我会使用 em。但为了确定，我再次添加了前缀，但什么也没发生。此外，您确实意识到使用 background-size: 100% 100%;对于全屏图像背景基本上是一场灾难吧？想象有一个大的 SQUARE 狗脸图像作为背景，背景大小：100% 100%；并在 16:9 显示器上使用该站点。你没听错吧？

【解决方案2】：

嗯，我在最新的 Mozilla 中看起来还不错。

如果您遇到问题，请尝试使用它

body { 
  background: url("./content/site_data/bg.jpg") no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  font-family: 'Lobster', cursive;
}

编辑

由于 cmets 对 OP 的回答得到了更多的许可

background: url("./content/site_data/bg.jpg") no-repeat center center fixed;

它的简写，

background-image: url("./content/site_data/bg.jpg");
background-repeat:no-repeat;
background-position: center center;
background-attachment:fixed;

Read more here

【讨论】：

"在 firefox 浏览器上检查：demo.jayantbhawal.in，而不是在宽屏模式下。"这是我问题的第一行，在代码之后。
有效！有用！它可以在没有前缀的情况下工作！但我必须要问，为什么要加上这个，“no-repeat center center fixed;”？
它的简写，background-image: url(path-to-file/img.jpg); background-repeat:no-repeat; background-position: center center; background-attachment:fixed;
尽管它有效，但我不明白为什么 firefox 需要它而不是 chrome。
让我们continue this discussion in chat.

【解决方案3】：

bhawal, 我认为您使用的是旧版本的 Mozilla。好吧，将供应商特定的前缀属性与 W3 标准一起添加是一种常见的做法。我们这样做只是为了确保它在大多数浏览器中都能正常工作。在您的情况下，您可以使用以下 CSS 规则：

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

如果这不起作用，请告诉我；如果可行，请投票。 :)

【讨论】：

我确实尝试过使用前缀，但我停止使用它们，这可能是练习，但我没有遇到任何不使用它们的问题。如果我这样做，我会使用 em。但为了确定，我再次添加了前缀，但什么也没发生。我确实提供了我正在使用的 Firefox 版本。 @Nitesh
我很抱歉@Nitesh，我没有注意到“无重复中心中心已修复；”这个添加，它虽然有效。谢谢！ :D 它也可以在没有前缀的情况下使用。
@JayantBhawal 我希望你能投票给答案。很抱歉我在阅读您的问题时错过了 FF 版本。
嗯，有两件事。 1. 永远不要要求投票，这很奇怪。 2. 我确实投了赞成票，因为这是一个正确的答案。似乎有人投了反对票。

【解决方案4】：

所以我刚刚遇到这个问题，因为我遇到了同样的问题。原来问题（在我的情况下）没有

<!DOCTYPE html>

在我的 html 文件的顶部（这似乎只影响 Firefox 中的 background-size: cover。

【讨论】：

【解决方案5】：

对于火狐：

~$ firefox -v
Mozilla Firefox 68.9.0esr

这使图像居中...

body {
    background-color: #1D4979;
    background-image: url(../images/background-2.png);
    min-height: 100vh;
    min-width: 100vw;
    background-size: cover;
    background-position: center;    
    background-repeat: no-repeat;
}

【讨论】：