全屏背景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>