CSS中的全页模糊 [英] Full Page Blur in CSS

问题描述

如何使用CSS模糊整个网页？
其他元素，如图片是允许的。

How can I blur a whole page using CSS? Other elements such as images are allowed.

推荐答案

这是在Firefox和WebKit工作，版本的Opera：

This is working in Firefox and WebKit, and in the more latest versions of Opera:

.blurredElement {

     /* Any browser which supports CSS3 */
    filter: blur(1px);

    /* Firefox */ 
    filter: url("blur.svg#gaussian_blur");

    /* Webkit */
    -webkit-filter: blur(1px);

    /* Opera */
    -o-filter: blur(2px);
}

blur.svg如下所示：

The blur.svg looks like this:

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

EDIT ：Firefox> = 35支持W3C定义的模糊。 http://caniuse.com/#feat=css-filters

EDIT: Firefox >= 35 supports blur defined by the W3C. http://caniuse.com/#feat=css-filters

这篇关于CSS中的全页模糊的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！