CSS3 Filter property to add a glass to a picture fuzzy effect example Introduction

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:

HTML code:

<div class= "Introbox" >    <!--personal Avatar--    <div class= "Imgshow" >                <ul class= "Details" >            <li class= "smallimg" >                < IMG class= "roundimg" src= "resources/images/1.jpg" alt= "" >            </li>            <li><p class= "uname" > "Lu Liangwei </p></li>            <li><p class=" CellPhone ">13218888888</p></li>        </ul >    </div></div>

CSS code:

/* Background image 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:DXImageTransform.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;} /* Handle the avatar into 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

Brightness brightness

Brightness filter is used to control the brightness of the picture, the parameter accepts the value is greater than or equal to 0,0% the output is pure black, 100% output is the original brightness of the image, greater than 100% when the brightness of the picture can be increased, such as 150%, the brightness will be increased 1.5 times times

Html:

<div id= "Container" >        </div>

Css:

#container {width:600px; height:800px;} #container img{width:200px;}. imgb{    filter:brightness (150%);/*firefox*/    -webkit-filter:brightness (150%);/*chrome, Safari, opera*/}

(Support Chrome,firefox,opera,safari, do not support any version of IE)

Contrast ratio contrast

The contrast filter controls the contrast of the picture, like a luma filter, where the parameter accepts a value greater than or equal to 0, which controls the difference between the dark and light portions of the CSS image. Therefore, setting 0% is gray, 100% is the original image, and greater than 100% further enhances the contrast of the image

Css:

. imga{    Filter:contrast (80%);    -webkit-filter:contrast (80%);}. imgb{    filter:contrast (150%);    -webkit-filter:contrast (150%);}

Grayscale Grayscale

The grayscale filter is used to control the grayscale of the image, which gradually transforms all the colors in our image into shades of gray, setting 0% to no effect, 100% to full gray, and no negative value allowed

Css:

. imga{    Filter:grayscale (30%);/*firefox*/    -webkit-filter:grayscale (30%);/*chrome, Safari, opera*/}.imgb{    Filter:grayscale (80%);/*firefox*/    -webkit-filter:grayscale (80%);/*chrome, Safari, opera*/}

Saturation of saturate

The saturate filter controls the color saturation of the image, setting 0% will completely remove all colors from the image, setting 100% to look like the original image, and more than 100% will saturate the image and not allow negative values

Css:

. imga{    Filter:saturate (30%);/*firefox*/    -webkit-filter:saturate (30%);/*chrome, Safari, opera*/}.imgb{    filter:saturate (150%);/*firefox*/    -webkit-filter:saturate (150%);/*chrome, Safari, opera*/}

Brown Sepia

Sepia filter is used to control the color of the picture, that is, the image into a retro-style old photo effect, set 0% for the original image, set 100% for the old photo effect

Css:

. imga{    Filter:sepia (50%);/*firefox*/    -webkit-filter:sepia (50%);/*chrome, Safari, opera*/}.imgb{    Filter:sepia (100%);/*firefox*/    -webkit-filter:sepia (100%);/*chrome, Safari, opera*/}

Hue Rotation hue-rotate

The Hue-rotate filter applies to all colors that the hue rotates to the image. Set 0deg without effect, the value does not have the maximum value, the value of more than 360deg is equivalent to a cycle, that is, the value of 90deg and 450deg is the same effect

Css:

. imga{    Filter:hue-rotate (90deg);/*firefox*/    -webkit-filter:hue-rotate (90deg);/*chrome, Safari, opera*/}. imgb{    filter:hue-rotate (150deg);/*firefox*/    -webkit-filter:hue-rotate (150deg);/*chrome, Safari, opera*/}

Inverse color Invert

The invert filter reverses all colors, the amount of reversal depends on the set value, the setting 0% is not reversed, the setting of 100% reverses all colors

Css:

. imga{    Filter:invert (60%);/*firefox*/    -webkit-filter:invert (60%);/*chrome, Safari, opera*/}.imgb{    Filter:invert (90%);/*firefox*/    -webkit-filter:invert (90%);/*chrome, Safari, opera*/}

Fuzzy Blur

The blur filter is suitable for Gaussian blurred images, blending the colors together and distributing them on the edges of the image. The RADIUS parameter passed to this filter to determine how many pixels the blend is interacting with on the screen. The greater the value, the more obvious the blur effect, and the filter can accept any length value, except the percentage

Css:

. imga{    Filter:blur (1px);/*firefox*/    -webkit-filter:blur (1px);/*chrome, Safari, opera*/}.imgb{    Filter : Blur (0.5em); /*firefox*/    -webkit-filter:blur (0.5em);/*chrome, Safari, opera*/}

Transparency Opacity

The opacity filter makes the image transparent, with a value of 0%, completely transparent, and when the value is 100%, it is completely opaque. This filter is similar to the known opacity property, the only difference is performance, opacity filter properties will perform better on hardware-accelerated browsers

Css:

. imga{    filter:opacity (25%);/*firefox*/    -webkit-filter:opacity (25%);/*chrome, Safari, opera*/}.imgb{    Filter:opacity (75%);/*firefox*/    -webkit-filter:opacity (75%);/*chrome, Safari, opera*/}

Shadow Drop Shadow

The drop shadow filter adds a shadow effect that requires an offset of x and y, a faint color, or a blur radius.

Css:

. imga{    Filter:drop-shadow (5px 5px 10px #666)/*firefox*/    -webkit-filter:drop-shadow (5px 5px 10px #666);/* Chrome, Safari, opera*/}.imgb{    Filter:drop-shadow (10px 10px 10px #eee);/*firefox*/    -webkit-filter: Drop-shadow (10px 10px 10px #eee);/*chrome, Safari, opera*/}

URL ()

Although all of the filters we discussed are very useful, they are actually generic filters, but your project may need more results, and if the filter above doesn't meet your requirements, you can create your own SVG filter and use its ID to reference it via URL ().

Html:

<div id= "Container" >        </div> <svg style=" Position:absolute; Top: -99999px "xmlns=" Http://www.w3.org/2000/svg ">    <filter id=" Greenish ">        < fecomponenttransfer>            <fefuncr type= "linear" slope= "2" intercept= " -0.5"/>            <fefuncg type= "linear "Slope=" 2 "intercept=" -0.1 "/>            <fefuncb type=" linear "slope=" 2 "intercept=" -0.25 "/>        </ fecomponenttransfer>    </filter>    <filter id= "bluish" >        <feComponentTransfer>            <fefuncr type= "linear" slope= "2" intercept= " -0.5"/>            <fefuncg type= "linear" slope= "2" intercept= " -0.1 "/>            <fefuncb type=" linear "slope=" 2 "intercept=" 0 "/>        </feComponentTransfer>    </filter></svg>

Css:

. imga{    Filter:url (' #greenish ');    -webkit-filter:url (' #greenish ');}. imgb{    filter:url (' #bluish ');    -webkit-filter:url (' #bluish ');}

Combine filters and animation filters (combining and animating Filters)

You can also combine multiple filters to get a variety of effects. In most cases, the order of the filters is not very much related. However, if you add a brown filter after the grayscale filter, a grayscale image is displayed.

Css:

. imgb{    -webkit-animation:haunted 3s infinite;    Animation:haunted 3s infinite;} @keyframes Haunted {    0% {        -webkit-filter:brightness (20%);        Filter:brightness (20%);    }    48% {        -webkit-filter:brightness (20%);        Filter:brightness (20%);    }    50% {        -webkit-filter:sepia (1) Contrast (2) brightness (200%);        Filter:sepia (1) Contrast (2) brightness (200%);    }    60% {        -webkit-filter:sepia (1) Contrast (2) brightness (200%);        Filter:sepia (1) Contrast (2) brightness (200%);    }    62% {        -webkit-filter:brightness (20%);        Filter:brightness (20%);    }    96% {        -webkit-filter:brightness (20%);        Filter:brightness (20%);    }    96% {        -webkit-filter:brightness (400%);        Filter:brightness (400%);    }

(There is a dynamic effect, but for the sake of, only see static)