CSS3 creates frosted glass background effect

Brief introduction

This effect is seen in the CSS secrets this book, feel very good;

The principle of implementation is quite simple;

and realize

Code implementation

<! DOCTYPE html> 
Summarize

This implementation pattern takes into account performance to write, as well as maintenance considerations
-Using EM, for example, makes it easy to zoom in and out of the overall size
-Hsla is used here, this is the first time I have used this color value; previously only in PS adjustment this, very good color mode. and Rgba much the same, but Hsla more in line with the human eye of the watch;
-also learned a new background abbreviation

/* Separate write *          /background-color: #ff0;           Background-image:url (background.gif);           Background-repeat:no-repeat;           background-attachment:fixed;           background-position:0 0;           Background-size:cover;                     /* abbreviated */          background: #ff0 URL (background.gif) no-repeat/fixed cover;           /* Set background-size must be separated by a single slash */
The above is CSS3 to create frosted glass background effect content, more relevant content please pay attention to topic.alibabacloud.com (www.php.cn)!

