您可以使用CSS图像过滤器。

-webkit-filter: blur(2px);
filter        : blur(2px);

有关CSS图像过滤器的更多信息：

• http://techstream.org/Web-Design/CSS3-Image-Filters
• http://html5-demos.appspot.com/static/css/filters/index.html

演示： JSFIDDLE

但实际上，他们使用的是预处理的JPG，只是将其用作正确位置的覆盖图。

#background {
    position: absolute;
    left: 10px;
    top: 10px;
    width: 600px;
    height: 600px;

    background-image: url(http://images.apple.com/home/images/osx_hero.jpg);
    background-position: 0 0;
}
#blur {
    position: absolute;
    left: 50px;
    top: 50px;
    width: 120px;
    height: 500px;

    background-image: url(http://images.apple.com/home/images/osx_hero_blur.jpg);
    background-position: -50px -50px;
}

<div id="background">
    <div id="blur"></div>
</div>

演示： JSFIDDLE

的CSS

CSS 3具有模糊滤镜（ 仅适用于2014年11月的webkit ）：

-webkit-filter: blur(3px); /*chrome (android), safari (ios), opera*/

IE 4-9支持非标准过滤器

filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3')

在此处查看有关模糊和其他滤镜的一些不错的演示。

供将来参考， 这里是CSS过滤器的兼容性表 。 Firefox似乎在v35 +中获得了该功能，而IE11似乎也没有任何兼容性。

SVG

一种替代方法是使用svg（ 对于IE9及更高版本基本上是安全的 ）：

filter: url(blur.svg#blur);

SVG：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
   <filter id="blur">
       <feGaussianBlur stdDeviation="3" />
   </filter>
</svg> 

jsFiddle演示

Java脚本

您将获得与javascript最高的浏览器兼容性，但通常是最慢的性能和js复杂性的增加。

• http://www.blurjs.com/（jquery插件， 画布解决方案，因此IE9 +，FF，Chrome支持 ）
• http://nbartlomiej.github.io/foggy/（jquery插件IE8 +，FF，Chrome支持）

您让我想尝试一下，所以我做了一下，在这里查看示例：

http://codepen.io/Edo_B/pen/cLbrt

使用：

1. 硬件加速CSS过滤器
2. JS用于类分配和箭头键事件
3. 图像CSS剪辑属性

而已。

我还相信，如果使用画布复制当前dom并使它模糊，则可以在任何屏幕上动态完成此操作。

作为CSS过滤器（ backdrop-filter器），将来应该会出现在浏览器中。目前几乎没有任何支持。有关浏览器的支持，请参见： http : //caniuse.com/#feat=css-backdrop-filter

这个CSS过滤器可以完成毛玻璃，而不会产生任何有趣的事情或骇客。会做的。

有人在Vine上录制了一个演示，它看起来真的很棒。他们每晚使用Safari来访问CSS过滤器。 https://vine.co/v/OxmjlxdxKxl