CSS - 背景尺寸：封面；无法在 Firefox 中工作

Question

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

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

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

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

Chrome 版本 35.0.1916.114 米 Firefox 版本 29.0.1

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

Answer 1

在此处输入图片说明 好吧，它在最新的 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;
}

编辑

由于评论中对 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;

在这里阅读更多

Answer 2

所以我刚刚遇到这个问题，因为我遇到了同样的问题。 结果证明问题（无论如何在我的情况下）没有

<!DOCTYPE html>

在我的 html 文件的顶部（这似乎只影响背景大小：Firefox 中的封面。

Answer 3

background-size 已添加到 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 */

Answer 4

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;
}

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

Answer 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;
}

CSS - 背景尺寸：封面；无法在 Firefox 中工作

问题描述

5 个解决方案

解决方案1
7 已采纳 2014-06-08 09:20:03

解决方案2
2 2015-02-18 23:01:27

解决方案3
0 2014-06-08 09:19:42

解决方案4
0 2014-06-08 09:43:42

解决方案5
0 2020-06-23 10:58:27

CSS - 背景尺寸：封面； 无法在 Firefox 中工作

问题描述

5 个解决方案

解决方案1 7 已采纳 2014-06-08 09:20:03

解决方案2 2 2015-02-18 23:01:27

解决方案3 0 2014-06-08 09:19:42

解决方案4 0 2014-06-08 09:43:42

解决方案5 0 2020-06-23 10:58:27

CSS - 背景尺寸：封面；无法在 Firefox 中工作

解决方案1
7 已采纳 2014-06-08 09:20:03

解决方案2
2 2015-02-18 23:01:27

解决方案3
0 2014-06-08 09:19:42

解决方案4
0 2014-06-08 09:43:42

解决方案5
0 2020-06-23 10:58:27