高斯模糊的实现

DIV:

<img src="tt.jpg" class="blur">

一、css:

  .blur {
            -webkit-filter: blur(10px);
            -moz-filter: blur(10px);
            -ms-filter: blur(10px);
            filter: blur(10px);

        filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false);      IE9及下可以使用

        }

------------------------------------------------------------------------------------------------------------------------------

二、svg:

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>
</svg>

--------------------------------------------------------------------------------------------------------------------------------------

以上两个方法都不兼容IE10及以上的版本

解决IE10以上的方法：

将图片在SVG文件中进行高斯模糊，然后当做背景图片显示出来，这种方法类似提前准备了一张已经高斯模糊的图片，替换原图。

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="tt.jpg" x="0" y="0" height="1000" width="600" filter="url(#blur)" />
</svg>

css:

    .blur {
            background-image: url(blur.svg);
        }

---------------------------------------------------------------------------------------------------------------------

JS方法：

使用stackblur.js

参考：http://www.zhangxinxu.com/wordpress/2013/11/css-svg-image-blur/

自己写JS高斯模糊方法：参考http://blog.miaozhaofeng.cn/post/javascript/jsgao-si-mo-hu-suan-fa-wen-ti

-------------------------------------------------------------------------------------------------------------------

虽然喜欢高斯模糊效果，不过目前实现方法要么不兼容，要么太过麻烦。影响性能。所以还是希望能找更轻便的方法的时候再用吧。