CSS中的整页模糊

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

1> tobspr..：

---

这在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如下所示:

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

2> pimvdb..：

---

您可以使用该filter属性blur,虽然它没有得到广泛支持:http://jsfiddle.net/GkXdM/1/.它在Chrome上受支持,但在整个页面上使用时会带来很大的性能损失.

body {
    filter: blur(2px);
}

3> Aron Rotteve..：

---

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

---

这有什么不对吗？:{position:absolute; left:0; right:0; top:0; bottom:0;}

---

如果你想使用这个anwser,将位置改为fixed,你可以将高度设置为100%

4> 小智..：

---

现实生活中的演示:http://premium.wpmudev.org/project/e-commerce/(点击视频).

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); 
}

好吧没有,仍然没有完全可用(http://caniuse.com/css-filters),但我们到了那里.

如上所述应用于包含元素,而不是body因为子元素无法否定模糊过滤器.