Use CSS to make the picture produce frosted glass effect

The picture effect of frosted glass makes its display more beautiful, the user experience is better, so it is widely used in mobile computer terminal.

such as the iOS system:

　　

So now let's take a look at the implementation of the effect of frosted glass:

First, this is the main content of HTML:

　　

 <  div  class  = "Container"     >  <  div  class  = "Mat_class"  ></ div     >  <  p  class  = "word"  >  SHOW time</ p  >  </ div  >  

Here container is used to place text

Mat_class is a container used to form the effect of frosted glass;

Then in the key CSS section:

. container{            width:960px;            height:600px;            Background-image:url (img/img.jpg);        }        . mat_class{            position:relative;            top:200px;            width:960px;            height:200px;            Filter:blur (5px);        }        . word{            Color:white;            position:relative;            left:240px;            font-size:80px;        }            

The code is simple, and I'll show you where to look.

Frosted Glass realizes the soul in this sentence:

Background-image:inherit;

Background-image is not inherited by default, but if you set the inherit, you properly adjust the length of the inner container, and then what do you feel now?

Look at the world from the camera feeling!

Attachment effect:

Original:

Success becomes behind:

Above

Use CSS to make the picture produce frosted glass effect