Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "how css uses frosted background". The editor shows you the operation process through an actual case. The operation method is simple, fast and practical. I hope this article "how to use css background" can help you solve the problem.

Code to achieve Document / * set background image full screen coverage and fixed * set internal element offset * / body {/ * back here Replace the scene image by itself * / background: url (demo.jpg) no-repeat center center fixed Background-size: cover; min-height: 100vh; box-sizing: border-box; margin: 0; padding-top: calc (50vh-6em); font: 150% Baskerville, Palatino, serif } / * overall centering function * background transparent and virtual * overflow hidden * Edge rounded * text added light shadow * / .description {position: relative Margin: 0 auto; padding: 1em; max-width: 23em; background: hsla (0pje 0% pr 100% pr .25) border-box; overflow: hidden; border-radius: .3em Box-shadow: 00 1px hsla (0 1em rgba 100% inset), 0. 5em 1em rgba (0 1px 1px hsla 0, 0, 0.6); 0 1px 1px hsla (0 1px 1px hsla 0% Person.3) } / * use filter to blur edges * / .description:: before {content:'; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin:-30px Z-index:-1;-webkit-filter: blur (20px); filter: blur (20px);} 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 pattern is written in terms of performance and maintenance considerations.

For example, with em, you can easily zoom in and out the overall size.

Hsla is used here, this is the first time I have used this color value; in the past, I only adjusted this in ps, which is a good color mode. More or less the same as RGBA, but HSLA is more in line with the view of human eyes

Also learned a new background abbreviation.

/ * write separately * / background-color:#ff0;background-image:url (background.gif); background-repeat:no-repeat;background-attachment:fixed;background-position:0 0 * abridged * / background: # ff0 url (background.gif) no-repeat / fixed cover;/* setting background-size must be separated by a single slash * / this is the end of the introduction on "how css uses frosted background". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.