html img图片模糊效果

html img图片模糊效果

2019-06-19 10:42:15 邓轩 阅读数 1086  收藏 更多

分类专栏： WEB前端

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

本文链接：https://blog.csdn.net/qq_39019735/article/details/92806621

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

处理前：

处理后：

CSS代码：

1. .blur {

2.  

3. filter: blur(20px);

4.  

5. -webkit-filter: blur(20px); /* chrome, opera */

6.  

7. -ms-filter: blur(20px);

8.  

9. -moz-filter: blur(20px);

10.  

11. }

12.  
13.  

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

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