整个网站(css-过滤器)在 Webkit 中是模糊的,但在 Edge 中不是
Entire website (css-filter) is blurred in Webkit but not in Edge
我对整个 html/css-world 都很陌生,所以我到处都会犯一些非常基本的错误。不管怎样,作为一个学校项目,我们应该创建一个关于一个想象中的游戏工作室的网页。
到目前为止,这是我们的项目:
https://github.com/giddorah/webpage
如您所见,该网站运行良好,在 Microsoft Edge 中看起来相当不错(吹嘘,吹嘘)...但出于某种原因,基于 Webkit 的浏览器使整个页面变得模糊。
我只是想让背景虚化一下。
任何人都可以看到我正在做的任何事情吗...我将对此进行解释。
问题是您将模糊应用于整个 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;
}
我对整个 html/css-world 都很陌生,所以我到处都会犯一些非常基本的错误。不管怎样,作为一个学校项目,我们应该创建一个关于一个想象中的游戏工作室的网页。
到目前为止,这是我们的项目: https://github.com/giddorah/webpage
如您所见,该网站运行良好,在 Microsoft Edge 中看起来相当不错(吹嘘,吹嘘)...但出于某种原因,基于 Webkit 的浏览器使整个页面变得模糊。
我只是想让背景虚化一下。
任何人都可以看到我正在做的任何事情吗...我将对此进行解释。
问题是您将模糊应用于整个 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;
}