整个网站（css过滤器）在Webkit中模糊，但不在边缘

-3

我对整个html/css世界都很陌生，所以我在每个地方都犯了一些非常基本的错误。无论如何，作为一个学校项目，我们应该创建一个关于虚拟游戏工作室的网页。整个网站（css过滤器）在Webkit中模糊，但不在边缘

这是迄今为止我们的项目： https://github.com/giddorah/webpage

正如你可以看到，该网站的伟大工程，在微软边缘看起来相当不错（吹牛，说大话）...但由于某些原因基于Webkit的浏览器都模糊整个页面。

我只是想让背景变得模糊。

任何人都可以看到任何明显的我正在做什么......我将与我解释这是新的。

2017-02-09 Johan Spånberg

背景和动画等一下，你要求我们***安装**（从回购克隆）*网站才能看到它？您是否意识到网站是为了向访问者呈现内容的概念而发明和形成的，而无需除浏览之外的任何其他内容？或者你跳过了这一课？我建议你创建一个你正在描述的问题的[mcve]。有关提问的问题，请参见[问]的建议。 –

哦，不，不。我在Github上有了这个页面，所以我认为这是一个很好很简单的方式让我向你展示代码。 –

的问题是，你申请的模糊到整个div.background这将适用于所有的孩子，你能做的最好的只是移动.hidden-scrollbar外背景的这样

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

然后加入旁边的背景

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

UPDATE

或者你也可以只添加在: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; 
}

来源

2017-02-09 23:30:13 stalin

谢谢！这真的有所作为。很好的解释。 :) –

整个网站（css过滤器）在Webkit中模糊，但不在边缘

回答

相关问题