html img图片模糊效果

版权声明：本文为博主原创文章，遵循​​ CC 4.0 BY-SA ​​版权协议，转载请附上原文出处链接和本声明。​

最近项目中有一个图片素材需要收费，不能下载和预览于是想到图片模糊处理，网上找了找资料先看效果图：

处理前：

html img图片模糊效果_javascript

处理后：

html img图片模糊效果_chrome_02

CSS代码：

.blur {
    filter: blur(20px);
    -webkit-filter: blur(20px); /* chrome, opera */
    -ms-filter: blur(20px);
    -moz-filter: blur(20px);
}

<img class="blur" src="1553504338610.jpg" />


​​​注：blur里面的值越大越模糊。