CSS 整个网页的模糊效果
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6267067/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Blur effect on the entire webpage
提问by xRobot
I want that the unregistered users on my website, see the entire website's pages with a blur effect.
我希望我网站上的未注册用户能够看到整个网站的页面具有模糊效果。
How can I create this blur effect with css ?
如何使用 css 创建这种模糊效果？
采纳答案by danjah
Here's some results, if by blur you mean fuzziness:
这是一些结果，如果模糊是指模糊：
This guy uses image shifting and opacity techniques in combo, I know your users are looking at a blurred website, but if there's no easy solution then perhaps taking a snapshot of your rego page and overlaying the image then it might do:
这家伙在组合中使用图像移动和不透明度技术，我知道您的用户正在查看一个模糊的网站，但是如果没有简单的解决方案，那么也许可以拍摄您的 rego 页面的快照并覆盖图像，然后它可能会这样做：
http://web.archive.org/web/20120211000759/http://simurai.com/post/716453142/css3-image-blur
http://web.archive.org/web/20120211000759/http://simurai.com/post/716453142/css3-image-blur
If you wanted to attempt duplicating your rego page, given that it may be a) disabled and b) minimal, then perhaps you could even have a bash at using the above image technique and applying it to node sets, offsetting the copies with CSS positioningand opacity- idk if zoommight help you too there. Even if your page was minimal enough, this would obviously require Javascript to duplicate the nodes, unless your backend can do this node duplication. Just an idea, really. Here's a really awful, very quick example:
如果你想尝试复制你的 rego 页面，考虑到它可能是 a) 禁用和 b) 最小，那么也许你甚至可以使用上述图像技术并将其应用于节点集，用CSS positioning和抵消副本opacity- idk 如果zoom在那里也可以帮助你。即使您的页面足够小，这显然也需要 Javascript 来复制节点，除非您的后端可以执行此节点复制。只是一个想法，真的。这是一个非常糟糕，非常快速的示例：
This SO posts outlines some of the limitations and difficulties with gaussian blur when not done with image, and has some interesting links:
这篇 SO 帖子概述了在不处理图像时高斯模糊的一些限制和困难，并有一些有趣的链接：
Gaussian Blur onHover Using jQuery
EDIT: As requested, the contents of the jsfiddle:
编辑：根据要求，jsfiddle 的内容：
<div class="container">
<div class="overlay">
<p>Please register etc etc...</p>
</div>
<form action="javascript:;" class="form0">
<input type="text" value="Username" />
<input type="text" value="Password" />
<button>Submit</button>
</form>
<form action="javascript:;" class="form1">
<input type="text" value="Username" />
<input type="text" value="Password" />
<button>Submit</button>
</form>
<form action="javascript:;" class="form2">
<input type="text" value="Username" />
<input type="text" value="Password" />
<button>Submit</button>
</form>
<form action="javascript:;" class="form3">
<input type="text" value="Username" />
<input type="text" value="Password" />
<button>Submit</button>
</form>
<form action="javascript:;" class="form4">
<input type="text" value="Username" />
<input type="text" value="Password" />
<button>Submit</button>
</form>
</div>?
.container {
width:500px;
height:500px;
position:relative;
border:1px solid #CCC;
}
form {
position:absolute;
left:10px;
top:10px;
}
form.form0 {
left:11px;
top:11px;
opacity:0.1;
}
form.form1 {
left:8px;
top:8px;
opacity:0.1;
zoom:1.02;
}
form.form2 {
left:11px;
top:11px;
opacity:0.1;
zoom:1.01;
}
form.form3 {
left:9px;
top:9px;
opacity:0.2;
}
form.form4 {
left:11px;
top:11px;
opacity:0.1;
}
.overlay {
width:250px;
height:250px;
margin-top:50px;
margin-left:auto;
margin-right:auto;
border:1px solid #666;
}
回答by Patrick Clancey
Try this...
尝试这个...
body {
filter:blur(3px);
}
You'll need to add -moz-, -webkit- prefixes (or use something like PrefixFree)
您需要添加 -moz-、-webkit- 前缀（或使用 PrefixFree 之类的东西）
回答by aaaidan
Edit (2015):The filtercss property is forming tantalisingly complete coverage. This lets you write rules like body { filter: blur(10px); }, which blurs the entire page.
编辑（2015年）：该filterCSS属性是形成诱人完全覆盖。这使您可以编写像 那样的规则body { filter: blur(10px); }，这会使整个页面变得模糊。
From what I can tell, there's no cross-browser way of blurring an element, even in this "modern age" of html5, css3, etc...
据我所知，即使在 html5、css3 等的“现代时代”中，也没有模糊元素的跨浏览器方式......
There is a blur filterfor IE (and onlyIE). An svg blur filtercan also be applied to an html elementbut from what I can tell, it only works in Firefox.
IE有一个模糊过滤器（并且只有IE）。一个SVG模糊滤镜也可应用于HTML元素，但是从我所知道的，它只是在Firefox的作品。
If you're happy for browser-specific hacks, go ahead, but if you need the effect to work on all browsers you're outta luck.
如果您对特定于浏览器的 hack 感到满意，请继续，但是如果您需要在所有浏览器上都能使用该效果，那您就不走运了。
If you justwant to blur text, you can use a clever text-shadow trick:
如果你只是想模糊文本，你可以使用一个巧妙的文本阴影技巧：
.blurry {
color: transparent;
text-shadow: 0 0 3px black; /* set to colour you want */
}
There are also ways to blur images, either by overlaying transparent, shifted copies of the image, or by processing the data with javascript.
还有一些方法可以模糊图像，通过覆盖图像的透明、移位副本，或者使用 javascript 处理数据。
Perhaps you can cobble together these techniques, and it will achieve what you want.
也许您可以将这些技术拼凑起来，它会实现您想要的。
But the broad answer, regrettably, for the moment is: there is no easy, holistic way to blur stuff in HTML.
但遗憾的是，目前广泛的答案是：没有简单、全面的方法来模糊 HTML 中的内容。
(I thought we were living in the future, man? What gives?!)
（我以为我们生活在未来，伙计？什么给了我们？！）
Addendum:Hope is in sight. At the time of writing, some webkit nightly ("bleeding edge") builds are implementing some of the new css filter specification. That demo doesn't work on any webkit browser I have installed, so it's still far from mainstream yet.
附录：希望就在眼前。在撰写本文时，一些 webkit nightly（“出血边缘”）构建正在实现一些新的css 过滤器规范。那个演示在我安装的任何 webkit 浏览器上都不起作用，所以它离主流还很远。
回答by js1568
You can add a fixed divset to 100% width and height to your body. That will fill the screen and you can put either a semi-transparent background on it or use CSS3 to create the effect you are looking for.
您可以将固定div设置为 100% 宽度和高度添加到您的body. 这将填满屏幕，您可以在其上放置半透明背景或使用 CSS3 来创建您正在寻找的效果。
回答by Learner
Create a new divtag with id="body_bag"and put your rest of the site edits within that divand use following css to give the blur effect.
创建一个新div标签，id="body_bag"并将您其余的站点编辑内容放入其中，div并使用以下 css 来提供模糊效果。
#body_bag {
position: absolute;
width: 100%;
top: 0;
left: 0;
background: #000;
opacity: 0.5;
filter: alpha(opacity = 50); /* required for opacity to work in IE */
}
