Question

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

我知道这是因为我的宽度和高度都是20％。如果我将其更改为100％。它在Chrome和Safari中变得过大，但完全适合Firefox。

我不确定此刻还有什么可以尝试的。我已经尝试了我在堆栈溢出时发现的关于背景图像的所有内容，但是在所有三种浏览器中都没有任何工作。

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>

全屏幕背景gif无法在Firefox中工作

1 个答案: