高斯滤镜模糊CSS3

http://www.cnblogs.com/fsjohnhuang/p/4127888.html#a3

 

 高斯模糊让我想起忘了戴眼镜上街的情景*~*!

   

  1. CSS3滤镜的实现

<style type="text/css"> .blur{ /** 格式，filer: blur(模糊半径) * 模糊半径，取值范围0~Npx，0为无效果 */ -webkit-filter: blur(1px); -moz-filter: blur(1px); -o-filter: blur(1px); -ms-filter: blur(1px); filter: blur(1px); } </style> <div class="blur" style="background:url(./mm.jpg)"></div>

     

  2. IE5.5~9的实现

       使用IE滤镜：  filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false);  ,该方式在IE11中文档模式为5.5~9均起作用。

  

  3. FF和IE10+的实现 

 　　使用SVG effect for HTML的方式：

　　       blur.svg:

<?xml version="1.0" encoding="utf-8"?> <!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" xmlns:ev="http://www.w3.org/2001/xml-events" baseProfile="full"> <defs> <filter id="blur"> <feGaussianBlur stdDeviation="10" /> </filter> </defs>
 <image xlink:href="./mm.jpg" x="0" y="0" height="200" width="200" filter="url(#blur)"/> </svg>

            index.html(FF下)：

<style type="text/css"> .blur{ filter: url(blur.svg#blur); } </style> <div class="blur" style="background:url(./mm.jpg)"></div>

           index.html(IE10+下，IE10+不支持直接在样式表对元素应用SVG滤镜)：

<style type="text/css"> .blur{ background-iamge: url(blur.svg); } </style> <div class="blur"></div>

 

    使用Canvas作处理，高斯模糊的算法请参考：阮老师的“高斯模糊的算法”参考译文，处理库StackBlur.js。

    处理库API： stackBlurImage( sourceImageID, targetCanvasID, radius, blurAlphaChannel ); 

• sourceImageID表示要模糊的图片的 id, 默认这个图片要隐藏；

• targetCanvasID表示要显示模糊图片的 canvas元素的 id;

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

• blurAlphaChannel为布尔属性，表示 aplha透明通道是否要模糊， true表示要模糊。