CSS3 creates frosted glass background effect

Introduction

I saw this effect in the book CSS Secrets, and it feels very good;

The implementation principle is also quite simple;

Renderings and Implementation

Rendering

##Code implementation

   

       

           

               

               

               

           

           

            
   

            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod   

            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,   

            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo   

            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse   

            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non   

            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.   

            
   

           

    

Summary

This implementation mode is written with performance in mind , and maintenance considerations
- For example, using em, you can easily zoom in and out of the overall size
- hsla is used here, this is the first time I use this color value; I only adjusted this in PS before , a very good color mode. It is similar to RGBA, but HSLA is more in line with the viewing of human eyes;
- I also learned a new background abbreviation method

/*分开写*/    
  
    background-color:#ff0;     
  
    background-image:url(background.gif);     
  
    background-repeat:no-repeat;     
  
    background-attachment:fixed;     
  
    background-position:0 0;     
  
    background-size:cover;     
  
        
  
    /*简写*/    
  
    background: #ff0 url(background.gif) no-repeat / fixed cover;     
  
    /*设置background-size必须用单斜杠隔开*/

The above is how to create a frosted glass background effect with CSS3 Content, for more related content, please pay attention to the PHP Chinese website (www.php.cn)!