html img图片模糊效果

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

处理前：

处理后：

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里面的值越大越模糊。