CSS3 How to achieve frosted glass background effect

This article is mainly for everyone to introduce in detail how CSS3 to create frosted glass background effect, is a very interesting skill in css3, hope to help everyone.

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

1. <! 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

1. /* 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 */