利用CSS3实现图片的毛玻璃效果

用PS给图片做后期效果制作的朋友都知道，PS中的滤镜特效有个高斯模糊，这个用来给图片做毛玻璃效果很好，比如下图，就是余斗用高斯模糊做出的一个毛玻璃效果：

原图如下：

这个效果用PS来实现非常简单，但是在前端设计中，这样的效果我们还可以通过CSS3来实现，代码也很简单，实现效果如下：

具体代码

HTML代码：

<div id="content">
<img id="blur" src="blur.jpg">
</div>
 

CSS代码：

#content{
    position:relative;
    overflow:hidden;
}
#blur{
    filter:blur(10px);
    -webkit-filter:blur(18px);
    -moz-filter:blur(18px);
    -ms-filter:blur(18px);
    -o-filter:blur(18px);
}
 

更多毛玻璃特效应用请点击：《CSS3毛玻璃实现微信发红包看照片》

资源均来自第三方，谨慎下载，前往第三方网站下载