backgroundSize“封面”在Firefox上不起作用[重复]答案

【问题标题】：backgroundSize "cover" not working on Firefox [duplicate]backgroundSize“封面”在Firefox上不起作用[重复]
【发布时间】：2023-03-19 13:00:01
【问题描述】：

每次刷新浏览器时，我都使用以下内容加载随机背景图像。在顶部，我使用了 2 个淡入的 z 层，一个从黑色到透明，另一个是从透明到纯色的覆盖图案。在 Chrome 和 Safari 上运行良好，但 Firefox 拒绝淡出第 1 层（黑色到透明），并且 Firefox 拒绝拉伸图像以覆盖背景。

<script type="text/javascript"> 
var totalCount = 6;
function ChangeIt() 
{
var num = Math.ceil( Math.random() * totalCount );
document.body.background = 'images/'+num+'.jpg';
document.body.style.backgroundSize = "cover";
document.body.style.backgroundPosition = "center";
}
</script>

</head>
<body style="background-color:#000">
 <a style="display:block; position:fixed; left:0; top:0; width:100%; height:100%; cursor:pointer" href="#/">
<div class="overlay fade-out one">
</div>
<div class="overlaygrid">
</div>
</a>
</body>
<script type="text/javascript"> 
ChangeIt();
</script> 
</html>

还有 CSS

.fade-out {
opacity:1; 
-webkit-animation:fadeIn ease-in 0;
-moz-animation:fadeIn ease-in 0;
animation:fadeIn ease-in 0;

-webkit-animation-fill-mode:forwards; 
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;

}

.fade-out.one {
-webkit-animation-delay: 0.0s;
-moz-animation-delay: 0.0s;
animation-delay: 0.0s;
}



.overlay {display:block;position:fixed;left:0;top:0;width:100%;height:100%; background:#000; z-index:1 }

.overlaygrid {display:block;position:fixed;left:0;top:0;width:100%;height:100%; background: url('../assets/bg-overlay-pattern.png'); z-index:2}

【问题讨论】：

JSFiddle 会在这里创造奇迹
这有帮助吗？ vuerichb.cc
不，它没有，但是在这里，我为你做了一个小提琴。如果您可以展示您的图片和问题，也许我们可以做更多：jsfiddle.net/Krv3P
对不起，我不太习惯 jsfiddle。我更正了覆盖模式的路径并删除了
现在它显示图片。你看到了吗？
为了查看问题，您需要使用顶部的“更新”链接更新小提琴并发布新链接，可能它所做的只是在末尾添加 /1 或其他内容

标签： javascript css firefox background-image fade

【解决方案1】：

您需要确保添加以下 CSS：

html {
    height: 100%;
}
body {
    background-size: cover;
    background-repeat: no-repeat;
    height: 100%;
}

注意：如果 body 还没有背景，您可以通过 CSS 设置背景大小，而无需通过 JavaScript 重新设置。将 JS 操作保持在最低限度。任何样式属性也是如此（当然除了你的图像......除非你想要一个默认图像）。

【讨论】：

欢呼技术恐惧症，现在我要做的就是弄清楚为什么我的褪色 div 卡住了 :)