CSS 中的整页模糊
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/371209/
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
Full Page Blur in CSS
提问by tobspr
How can I blur a whole page using CSS? Other elements such as images are allowed.
如何使用 CSS 模糊整个页面？允许其他元素，例如图像。
回答by tobspr
This is working in Firefox and WebKit using the filter: blur(radius). See Can I Use: CSS filtersfor which browsers can support this.
这在 Firefox 和 WebKit 中使用filter: blur(radius). 请参阅我可以使用：浏览器可以支持的CSS 过滤器。
.blurredElement {
/* Any browser which supports CSS3 */
filter: blur(1px);
/* Firefox version 34 and earlier */
filter: url("blur.svg#gaussian_blur");
/* Webkit in Chrome 52, Safari 9, Opera 39, and earlier */
-webkit-filter: blur(1px);
}
The blur.svg for Firefox 34 or below looks like this:
Firefox 34 或以下版本的 blur.svg 如下所示：
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter id="gaussian_blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="1" />
</filter>
</defs>
</svg>
You can adjust the radius, but lower values mean better performance.
您可以调整半径，但较低的值意味着更好的性能。
回答by pimvdb
You can use the filterproperty with blur, although it's not widely supported: http://jsfiddle.net/GkXdM/1/. It's supported on Chrome, but it comes with a big performance penalty when used on the whole page.
您可以将该filter属性与 一起使用blur，尽管它并未得到广泛支持：http: //jsfiddle.net/GkXdM/1/。它在 Chrome 上受支持，但在整个页面上使用时会带来很大的性能损失。
body {
filter: blur(2px);
}
回答by Jason Hibbs
Real life demo here: http://premium.wpmudev.org/project/e-commerce/(click on the video).
这里的真实演示：http: //premium.wpmudev.org/project/e-commerce/（点击视频）。
They add the class thickbox-opento the body, when thickbox is open, and from there target and style a whole-content (except overlay and popup) containing element like so:
thickbox-open当thickbox打开时，他们将类添加到正文中，然后从那里定位并设置包含元素的整个内容（覆盖和弹出除外）的样式，如下所示：
.thickbox-open #main-container {
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-ms-filter: blur(2px);
-o-filter: blur(2px);
filter: blur(2px);
}
Okay so no, still not fully usable (http://caniuse.com/css-filters), but we're getting there.
好吧，不，仍然不能完全使用（http://caniuse.com/css-filters），但我们已经到了。
Apply to a containing element as above rather than bodysince a blur filter cannot be negated by child elements.
如上所述应用于包含元素，而不是body因为模糊过滤器不能被子元素否定。
回答by Aron Rotteveel
I am not sure if this is what you mean, but an often seen blur-like effect is created by creating a full height, full width DIV-element with a background-color and opacity property set.
我不确定这是否是您的意思，但是通过创建具有背景颜色和不透明度属性集的全高、全宽 DIV 元素，可以创建一种常见的模糊效果。
/* DIV-element with black background and 50% opacity set */
div.overlay {
position: absolute;
width: 100%;
top: 0;
left: 0;
background: #000;
opacity: 0.5;
filter: alpha(opacity = 50); /* required for opacity to work in IE */
}
Since your page height can vary, you'd probably want to use Javascript to set the height for this element.
由于您的页面高度可能会有所不同，您可能希望使用 Javascript 来设置此元素的高度。
回答by Joseph Lust
This is possible in Firefox only at this time. Here are the steps (see example here).
目前这仅在 Firefox 中是可能的。以下是步骤（请参阅此处的示例）。
You need the XHTML doc type (since we're using XML SVG markup).
您需要 XHTML 文档类型（因为我们使用的是 XML SVG 标记）。
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg">
Insert the SVG element where the blur should appear.
在应该出现模糊的地方插入 SVG 元素。
<div class="blurDiv"></div>
<svg:svg>
<!-- Filter -->
<svg:filter id="blurLayer">
<!-- Blur and attributes -->
<svg:feGaussianBlur stdDeviation="0.9"/>
</svg:filter>
</svg:svg>
Include inline style (not from external css file).
包括内联样式（不是来自外部 css 文件）。
<style type="text/css">
div.blurDiv { filter:url(#blurLayer); }
</style>
This gives you a true blur (like zoom out effect), not the standard transparent glass look you find everywhere else.
这为您提供了真正的模糊效果（如缩小效果），而不是您在其他任何地方都能找到的标准透明玻璃外观。
回答by coops
Here is a quick and dirty solution, take it and use if want, tested on Firefox & chrome, but should work across compliant browsers
这是一个快速而肮脏的解决方案，如果需要，可以使用它，在 Firefox 和 chrome 上进行测试，但应该可以在兼容的浏览器中使用
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Blur</title>
<style type="text/css">
#f0,#f1,#f2{position:absolute;left:0px;top:0px;height:95%}
#f0{filter:alpha(opacity=50);opacity: 0.15;-moz-opacity:0.15;z-index:15}
#f1{filter:alpha(opacity=25);opacity: 0.25;-moz-opacity:0.25;z-index:2}
#f2{filter:alpha(opacity=75);opacity: 0.75;-moz-opacity:0.75;}
.fin{margin-right:auto;margin-left:auto}
body{display:none}
</style>
<script type="text/javascript">
var winX=window.innerWidth-20;
var winY=screen.availHeight-10;
var count=0;
var maxCount=50;
var goBlur=true;
function ele(id) {
return document.getElementById(id);
}
function runBlur() {
if(goBlur) {
for(var i=0; i<2; i++) {
var x = Math.random()<0.5?-1:1;
var y = Math.random()<0.5?1:-1;
if(ele("f"+i).offsetLeft >3)
x=-1;
else if(ele("f"+i).offsetLeft<-3)
x=1;
if(ele("f"+i).offsetLeft >3)
y=-1;
else if(ele("f"+i).offsetLeft<-3)
y=1;
ele("f"+i).style.left = (ele("f"+i).offsetLeft + x)+"px";
ele("f"+i).style.top = (ele("f"+i).offsetTop + x)+"px";
}
}
count++
if(count>maxCount) {
count=0;
if(goBlur)
goBlur=false;
else
goBlur=true;
for(var i=0; i<3; i++) {
ele("f"+i).style.left = "0px";
ele("f"+i).style.top = "0px";
}
}
setTimeout("runBlur()",200);
}
function pageLoaded() {
var content = document.body.innerHTML;
var rewriteBody="";
for(var i=0; i<3; i++) {
rewriteBody+='<div id="f'+i+'"><div class="fin">'+content+'</div></div>';
}
document.body.innerHTML=rewriteBody;
setTimeout("setUp()",200);
}
function setUp() {
for(var i=0; i<3; i++) {
ele("f"+i).style.width=winX+"px";
}
document.body.style.display="block";
runBlur();
}
</script>
</head>
<body onload="pageLoaded()">
<h1 style="color:#900">Page blur example</h1>
You can put any page content and html you want here.
</body>
</html>
回答by markus
Whatever you are trying to do, if it's not just for fun, don't do it :)
无论你想做什么，如果不是为了好玩，就不要这样做:)
I think you'd have to loop all elements trough the blur filter which only works with IE and not with firefox.
我认为您必须通过模糊过滤器循环所有元素，该过滤器仅适用于 IE 而不适用于 Firefox。
Here's an ugly solution to achieve an IMO ugly blur in FF: http://kilianvalkhof.com/2008/css-xhtml/cross-browser-text-shadow/
这是在 FF 中实现 IMO 丑陋模糊的丑陋解决方案：http: //kilianvalkhof.com/2008/css-xhtml/cross-browser-text-shadow/
回答by Mike Burroughs
On the height 100% question, there is no CSS solution, even in CSS3, but there is a JQuery way of doing it. If the element is #modal, define all other properties in the CSS file and do not even mention the height property in the CSS. Then put the following JQuery code in your HTML as follows:
在高度 100% 问题上，即使在 CSS3 中也没有 CSS 解决方案，但有一种 JQuery 方法可以做到。如果元素是#modal，请在 CSS 文件中定义所有其他属性，甚至不要在 CSS 中提及 height 属性。然后将以下 JQuery 代码放入您的 HTML 中，如下所示：
<script type="text/javascript">
$(function(){
$('.modal') .css({'height': (($(window).height()))});
});
$(window).resize(function(){
$('.modal') .css({'height': (($(window).height()))});
});
</script>
This requires JQuery of course, and may cause issues if the content is taller than the viewport. As to the ability to blur the contents behind it dynamically, that's something I'd love to know.
这当然需要 JQuery，如果内容高于视口，可能会导致问题。至于动态模糊其背后内容的能力，这是我很想知道的。
