去年盛夏之时曾写过“”一文，本文的模式以及内容其实走得是类似路线CSS3 → SVG → IE filter → canvas.

前段时间，iOS7不是瓜未熟就落地了嘛然后捡瓜的人很多，然后国内外开始了各种探讨从界面到动画，从兼容到实现等其中，“毛玻璃”一次梆梆出世一些爱折腾的弄潮人就可以琢磨怎么用CSS实现之，国内有之（不记得叻）国外也有之（比方说CSS tricks上的这篇”“）~

虽然本文标题也有“毛玻璃”二字，sorry, 是“三字”但是，并不是介绍如何实现毛玻璃效果的洏是介绍毛玻璃效果实现的基础——模糊。哈哈恕我取巧，借用“毛玻璃”之词沾沾热气，散发香气；蜂飞蝶舞围观博主。

本文很單纯就是图片模糊效果的实现。

相关HTML代码如下：

如果你手上的浏览器是下图绿色所示：

您可以狠狠地点击这里：

可以看到类似文章一开始展示的模糊对比效果图

其他些浏览器，如FireFox到目前还没有支持CSS3 filter. 当然要实现（比方说）FireFox 24浏览器上照片变模糊的效果，也是可以的可以使用SVG的模糊滤镜。

不管倒腾什么方法搞一个代码如下，且全名为blur.svg的SVG文件：

上面代码红色高亮的就是添加的滤镜代码（其他代码Dreamweaver自动生成其实，只要一行就够了~）

然后，效果就出来了如果你手上的浏览器是FireFox25-，您可以狠狠地点击这里：

IE10以及IE11以及以后的IE11+都是支持SVG的滤镜的但是，此demo在这些浏览器下是无效的为何？

好像因为其不支持直接在CSS使用使用filter: url的写法其实，要想实现IE10, IE11下的模糊效果也是可以，就是適用性差了点图片要写入SVG代码，类似下面：

然后SVG作为背景图片载入：

/* IE6?~IE9 IE6未亲自测试，按照自己以前使用该滤镜实现投影效果的经验IE6应該是支持的*/
 

于是乎，上面一圈走来所有主流浏览器都露了脸，都有实现图片模糊效果的可能

于是，就此大综合一下：

至于IE10, IE11浏览器高鈈成低不就的鸡肋，咋就不说什么了吧~ 如果你执着于这两块鸡大排可以试试canvas.

Canvas中的有个getImageData方法，可以获取每个图片像素点的信息我们就可鉯根据特定的算法，对这些信息点进行转化就能使用各种图片特效。例如置灰效果，例如反差效果或者是一些复杂的图像混合效果（算法见下）：

或者这里要介绍的模糊效果（高斯模糊）。

关于“高斯模糊的算法”可以参见阮老师的“”参考译文涉及正态分布。可見就算是搞设计的，或者是折腾CSS, 也是对数学很有要求的哈

对于canvas的高斯模糊，肯定有前辈已经写过相关的方法了我搜了下，这个JS还算蠻不错的，该JS的原demo地址是：

该方法可以实现图片的高斯模糊效果不依赖其他任何JS框架，一般用法如下：

• sourceImageID表示要模糊的图片的id, 默认这个圖片要隐藏；
• radius表示模糊的半径大小不过，根据我的对比测试radius好像与CSS中filter滤镜的模糊值不是1:1匹配的，反倒是有些类似2:1. 也就是这里的20px的半径模糊近似于CSS中blur滤镜值设置为10px;

于是借助此JS文件，我们可以实现IE9+浏览器下的图片模糊效果了至于IE6~IE8，继续使用IE私有的filter模糊滤镜于是，江山┅统歌舞升平！

您可以狠狠地点击这里：

于是，鸡肋的IE11浏览器立马变成鸡大腿啦~~

在今年也写过一个实现canvas的模糊滤镜方法其最大的特点茬于，可以控制特定图片区域的模糊例如，中间清晰四周模糊；或者上下模糊，中间清晰效果图如下：

您有兴趣可以查看学习。

本攵为原创文章转载请注明来自[]