给图片添加高斯模糊

该文章由 leevare 发布于 ，归类于 HTML/CSS。

css3中有一个高斯滤镜的属性filter，所以在不考虑兼容性的情况下，可以这样使用

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

在ie10或ie11中可以使用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="mm1.jpg" x="0" y="0" height="191" width="265" filter="url(#blur)" />
</svg>

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

如果觉得我的文章对您有用，请您随意打赏。您的支持将鼓励我更加努力创作！

如无特殊声明，文章均为原创，若有不正之处，万望告知。转载请附上原文地址，十分感谢！

本文地址：https://www.leevii.com/?p=842

相关文章: