CSS3 Filter property to add a frosted glass blur effect to a picture

Record the processing of the image blur effect in the project, requirements: The background map must be passed through the IMG tag, and the avatar will be made into a circular

Example Picture:

650) this.width=650; "src=" Http://s1.51cto.com/wyfs02/M02/88/A1/wKioL1f97R6DJoYPAAG57NLOTDE520.png "title=" Qq20161012155712.png "alt=" Wkiol1f97r6djoypaag57nlotde520.png "/>

HTML code:

<div class= "Introbox" >    <!--profile picture-->    <div  class= "Imgshow" >                <ul class= " Details ">            <li class=" Smallimg ">                              </li>             <li><p class= "uname" > "Lu Liangwei </p></li>             <li><p class= "CellPhone" >13218888888</p></li>      &nBsp;  </ul>    </div></div> 

CSS code:

/* background blur effect */.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:d XImageTransform.Microsoft.Blur (pixelradius=5, makeshadow=false);  /* ie6~ie9 */}.details{ Position:absolute; left:0; right:0; top:8%; margin:auto;} /* Adjust the location of personal information */.smallimg{width:100px; height:100px; margin:2% auto; overflow:hidden;} /* Treat the Avatar as a round */.roundimg{display:block;width:100px; height:100px; -webkit-border-radius:50%; - moz-border-radius:50%; border-radius:50%;} 

About the CSS3 Filter property, this is how the manual

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M02/88/A4/wKiom1f98BfjT3RhAAFUVNdMuf8744.png "title=" Qq20161012161035.png "alt=" Wkiom1f98bfjt3rhaafuvndmuf8744.png "/>

More introduction, you can see the Rookie tutorial: http://www.runoob.com/cssref/css3-pr-filter.html

This article is from the "Dapengtalk" blog, make sure to keep this source http://dapengtalk.blog.51cto.com/11549574/1861148

CSS3 Filter property to add a frosted glass blur effect to a picture