html - 全屏背景 gif 在 Firefox 中不起作用

Question

目前我正在编写一个大学作业网站。我有一个 gif 用于索引页面的背景。 gif 在 Chrome 和 Safari 中都是全屏的，但在 Firefox 中不是。

我知道这是因为我使用了 20% 的宽度和高度。如果我将其更改为 100%。在 Chrome 和 Safari 中变得过大，但在 Firefox 中非常适合。

目前我不确定还可以尝试什么。我已经尝试了我在堆栈溢出中发现的关于背景图像的所有内容，但遗憾的是，所有三种浏览器都无法正常工作。

div 位于我所有内容之上的 div 中，该 div 在所有正文内容之上打开和关闭。

CSS:

.backgroundgif {
background:url(../images/lettering.gif) no-repeat center center;    
z-index: -1;
width:20%;
height:20%;
position:absolute;
background-size:cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-filter: blur(1px) grayscale(0.6) brightness(0.7);
-webkit-transform-origin: top left;
-webkit-transform: scale(5);
 }

HTML:

    <div class="backgroundgif">
</div>

Answer 1

您仅在转换时使用 -webkit- 前缀进行缩放，Firefox 无法理解这一点。

The transform property does not really need to be prefixed for anything other than Safari .还要添加非前缀属性。

为防止出现任何滚动问题，请改用 position: fixed。它不会滚动。

.backgroundgif {
  background: url(http://www.placehold.it/1000) no-repeat center center;
  z-index: -1;
  width: 20%;
  height: 20%;
  position: fixed;
  background-size: cover;
  -webkit-filter: blur(1px) grayscale(0.6) brightness(0.7);
  -webkit-transform-origin: top left;
  -webkit-transform: scale(5);
  transform-origin: top left;
  transform: scale(5);
}

<div class="backgroundgif">
</div>