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
<! 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 */