如何使用 CSS 模糊整个页面？允许使用其他元素，例如图像。
Steve
问问题
98549 次
8 回答
35
这在 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);
}
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>
您可以调整半径，但较低的值意味着更好的性能。
于 2012-08-19T07:59:19.900 回答
15
您可以将filter属性与 一起使用blur，尽管它没有得到广泛支持：http: //jsfiddle.net/GkXdM/1/。它在 Chrome 上受支持，但在整个页面上使用时会带来很大的性能损失。
body {
filter: blur(2px);
}
于 2012-10-26T22:38:47.430 回答
12
我不确定这是否是您的意思，但是通过创建具有 background-color 和 opacity 属性集的全高、全宽 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 */
}
由于您的页面高度可能会有所不同，因此您可能希望使用 Javascript 来设置此元素的高度。
于 2008-12-16T13:12:46.453 回答
9
此处的真实演示：http: //premium.wpmudev.org/project/e-commerce/（点击视频）。
当thickbox打开时，他们将类添加thickbox-open到正文中，并从那里定位和设置包含元素的整个内容（覆盖和弹出窗口除外），如下所示：
.thickbox-open #main-container {
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-ms-filter: blur(2px);
-o-filter: blur(2px);
filter: blur(2px);
}
好吧，不，仍然不能完全使用（http://caniuse.com/css-filters），但我们已经到了那里。
如上所述应用于包含元素，而不是body因为子元素不能否定模糊过滤器。
于 2013-01-29T18:04:35.343 回答
4
这仅在 Firefox 中是可能的。以下是步骤（请参见此处的示例）。
您需要 XHTML 文档类型（因为我们使用的是 XML SVG 标记）。
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg">
在应出现模糊的位置插入 SVG 元素。
<div class="blurDiv"></div>
<svg:svg>
<!-- Filter -->
<svg:filter id="blurLayer">
<!-- Blur and attributes -->
<svg:feGaussianBlur stdDeviation="0.9"/>
</svg:filter>
</svg:svg>
包括内联样式（不是来自外部 css 文件）。
<style type="text/css">
div.blurDiv { filter:url(#blurLayer); }
</style>
这为您提供了真正的模糊效果（如缩小效果），而不是您在其他任何地方都能找到的标准透明玻璃外观。
于 2011-11-01T13:33:52.220 回答
4
这是一个快速而肮脏的解决方案，如果需要，可以使用它，在 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>
于 2012-01-27T23:09:37.350 回答
0
无论你想做什么，如果它不仅仅是为了好玩，就不要这样做:)
我认为您必须通过仅适用于 IE 而不适用于 Firefox 的模糊过滤器循环所有元素。
这是在 FF 中实现 IMO 丑陋模糊的丑陋解决方案：http: //kilianvalkhof.com/2008/css-xhtml/cross-browser-text-shadow/
于 2008-12-16T12:59:16.400 回答
-1
在高度 100% 的问题上，没有 CSS 解决方案，即使在 CSS3 中也是如此，但有一种 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>
这当然需要 JQuery，如果内容高于视口，可能会导致问题。至于动态模糊其背后内容的能力，这是我很想知道的。
于 2011-10-12T01:07:22.987 回答