CSS 图片毛玻璃效果

CSS 越发高级了。月小升今天弄个毛玻璃效果

<style>
.blur {	
	width:1000px;
    filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */
 
    -webkit-filter: blur(5px); /* Chrome, Opera */
       -moz-filter: blur(5px);
        -ms-filter: blur(5px);    
            filter: blur(5px);
 
    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=5, MakeShadow=false); /* IE6~IE9 */
}
</style>
<img src="taylor.jpg" class="blur" />

其中blur(5px)中的大小决定了模糊后的图片大小和模糊程度

原图

毛玻璃效果


This entry was posted in WEB前端 and tagged , . Bookmark the permalink.
月小升QQ 2651044202, 技术交流QQ群 178491360
首发地址:月小升博客https://java-er.com/blog/css-img-maobingli/
无特殊说明,文章均为月小升原创,欢迎转载,转载请注明本文地址,谢谢
您的评论是我写作的动力

Leave a Reply

Your email address will not be published. Required fields are marked *

*

*

  

  

About Me

静水流深,水滴石穿