整个网站（css-filter）在Webkit中模糊但在Edge中不模糊

debugcn 发表于 Dev

约翰·斯潘伯格（JohanSpånberg）

我是整个html / css-world的新手，所以我到处都犯了一些非常基本的错误。无论如何，作为一个学校项目，我们应该创建一个有关虚拟游戏工作室的网页。

到目前为止，这是我们的项目：https : //github.com/giddorah/webpage

如您所见，该网站运行良好，在Microsoft Edge中看起来不错（吹牛，吹牛）...但是由于某些原因，基于Webkit的浏览器使整个页面变得模糊。

我只希望背景模糊。

有人能看到我在做的任何明显的事情吗？我将以新手来解释一下。

斯大林

问题是您正在将模糊应用于整个对象，div.background这将应用于所有孩子，最好的办法就是.hidden-scrollbar像这样将背景移到外部

<div class="background"></div>
<div class="hidden-scrollbar">....</div>

然后将下一个添加到背景中

position: absolute;
top: 0;
left: 0;
right: 0;

更新

或者，您也可以在:before伪类中添加背景和动画

.background:before {
  content:"";
  -webkit-filter: blur(15px);
  -moz-filter: blur(15px);
  -o-filter: blur(15px);
  -ms-filter: blur(15px);
  filter: blur(15px);
  background: url(../img/newback.jpg) repeat-y;
  -webkit-animation: backgroundScroll 120s linear infinite;
  animation: backgroundScroll 120s linear infinite;
  width: 100vw;
  height: 100vh;
  position: fixed;
}
.background {
  width: 100vw;
  height: 100vh;
  top: -5%;
  left: -5%;
  z-index: 0;
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。