css3 filter属性 给图片添加毛玻璃模糊效果

标签：css3 filter(滤镜) 属性   图片模糊效果   圆形图片   

记录下项目中关于图片模糊效果的处理，要求：背景图必须通过img标签传入，而且头像要做成圆形的

示例图片：

HTML代码：

<div class="introBox">
    <!--个人头像-->
    <div class="imgShow">
        <img class="imgBground" src="resources/images/1.jpg" >
        <ul class="details">
            <li class="smallImg">
                <img class="roundImg" src="resources/images/1.jpg" >
            </li>
            <li><p class="uname">吕良伟</p></li>
            <li><p class="cellPhone">13218888888</p></li>
        </ul>
    </div>
</div>

CSS代码：

/*背景图模糊效果*/
.imgBground{
    width:100%;
    height:28vh;
    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 */
}
.details{position:absolute; left:0; right:0; top:8%; margin:auto;}/*调整个人信息的位置*/
.smallImg{width:100px; height:100px; margin:2% auto; overflow:hidden;}
/*把头像处理成圆形*/
.roundImg{display:block;width:100px; height:100px; -webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%;}

关于CSS3 filter(滤镜) 属性，手册是这么介绍的

更多介绍，可以查看菜鸟教程：http://www.runoob.com/cssref/css3-pr-filter.html

本文出自 “dapengtalk” 博客，请务必保留此出处http://dapengtalk.blog.51cto.com/11549574/1861148

css3 filter属性 给图片添加毛玻璃模糊效果

标签：css3 filter(滤镜) 属性   图片模糊效果   圆形图片   

原文地址：http://dapengtalk.blog.51cto.com/11549574/1861148