整个网站（css-过滤器）在 Webkit 中是模糊的，但在 Edge 中不是

Question

我对整个 html/css-world 都很陌生，所以我到处都会犯一些非常基本的错误。不管怎样，作为一个学校项目，我们应该创建一个关于一个想象中的游戏工作室的网页。

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

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

我只是想让背景虚化一下。

任何人都可以看到我正在做的任何事情吗...我将对此进行解释。

Answer 1

问题是您将模糊应用于整个 div.background 这将应用于所有 children，您能做的最好的就是将 .hidden-scrollbar 移到外面像这样的背景

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

然后在背景中添加下一个

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

更新

或者您也可以只在 :before 伪 class

中添加背景和动画

.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;
}

整个网站（css-过滤器）在 Webkit 中是模糊的，但在 Edge 中不是

Entire website (css-filter) is blurred in Webkit but not in Edge

html

css

blur