Question

如何使用CSS模糊整个页面？允许使用其他元素，如图像。

Answer 1

这在Firefox和WebKit中使用filter: blur(radius)。有关哪些浏览器可以支持此功能，请参阅Can I Use: CSS filters。

.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>

您可以调整半径，但值越低意味着性能越好。

Answer 2

您可以将filter属性与blur一起使用，但不受广泛支持：http://jsfiddle.net/GkXdM/1/。它在Chrome上受支持，但在整个页面上使用它会带来很大的性能损失。

body {
    filter: blur(2px);
}

Answer 3

~~现实生活演示：http://premium.wpmudev.org/project/e-commerce/（点击视频）。~~

当厚箱打开时，他们将类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，因为子元素无法否定模糊过滤器。

Answer 4

我不确定这是不是你的意思，但是通过创建一个具有背景颜色和不透明度属性集的全高度全宽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来设置此元素的高度。

Answer 5

此时此功能仅适用于Firefox。以下是步骤（参见示例here）。

您需要XHTML doc类型（因为我们使用的是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>

这会给你一个真正的模糊（比如缩小效果），而不是你在其他地方找到的标准透明玻璃外观。

Answer 6

这是一个快速而肮脏的解决方案，如果需要，可以使用它，并在Firefox和＆amp ;; 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>

Answer 7

无论你想做什么，如果它不只是为了好玩，不要这样做：）

我认为你必须通过模糊过滤器循环所有元素，模糊过滤器只适用于IE而不适用于Firefox。

这是在FF中实现IMO丑陋模糊的难看解决方案：http://kilianvalkhof.com/2008/css-xhtml/cross-browser-text-shadow/

Answer 8

在高度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>

这当然需要JQuery，如果内容比视口高，可能会导致问题。至于动态模糊其背后内容的能力，这是我想知道的事情。

CSS中的整页模糊

8 个答案: