CSS中的整页模糊

Question

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

Answer 1

这在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>

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

Answer 2

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

body {
    filter: blur(2px);
}

Answer 3

我不确定这是不是你的意思,但是通过创建一个具有背景颜色和不透明度属性集的全高度,全宽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 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因为子元素无法否定模糊过滤器.

Answer 5

无论你想做什么，如果不是为了好玩，就不要做:)

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

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