Shulou(Shulou.com)05/31 Report--

This article mainly explains "how to achieve the ground glass effect in CSS3". The content of the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to achieve the ground glass effect in CSS3".

The code is as follows:

Body {min-height: 100vh; box-sizing: border-box; margin: 0; padding-top: calc (50vh-6em); font: 150% serif; background 1.6 serif; background: url ("iphone.jpg") fixed 0 center; background-size: cover;} main {margin: 0 auto; padding: 1em; max-width: 30em; border-radius: .3em Box-shadow: 00 1px hsla (0 1em rgba 100% inset), 0. 5em 1em rgba (0 1px 1px hsla, 0); background: hsla (0).

Get rid of the styling code, and the core code to achieve the ground glass effect is as follows:

Body {... Background: url ("iphone.jpg") fixed 0 center; background-size: cover;} main {… Background: hsla (0. 0%. 100%. 3);}

Of course, this effect is still a little far from what we expected, because a simple 30% transparency will make the text difficult to read. For the page, the background image only plays the role of beautification, and the text is the core. You can increase the percentage of transparency, but the page will look rigid. In order to make the text easy to read and keep the page lively, you can blur the background of the mian tag above.

You may try the blur filter, but unfortunately it doesn't work right:

Main {... -webkit-filter: blur (3px); filter: blur (3px);}

Using the blur filter will blur the text, and you can't see it clearly, so you have to give up. The right thing to do is to add a pseudo element to the mian tag:: before, and use the blur filter on the pseudo element: (for demonstration, add a red background color)

Main {position: relative;... } main::before {content:'; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index:-1;-webkit-filter: blur (20px); filter: blur (20px); background: rgba

You can see that the blur effect is coming out, but it leads to two problems. First of all, because there is an outer shadow in blur, this is easier to solve, as long as you add overflow: hidden;. Secondly, the blur effect within the blur radius of the surrounding 20px will gradually fade. If you mind, if you want the blur around you to be the same as the middle, you can extend the pseudo-element size to 20px, and just to be on the safe side, you can extend it a little bit to 30px:

Main {... Overflow: hidden;} main::before {… Margin:-30px;}

Finally, replace the red background color of the pseudo element with the background image of body, and the effect is as follows.

Thank you for your reading, the above is the content of "how to achieve ground glass effect in CSS3". After the study of this article, I believe you have a deeper understanding of how to achieve ground glass effect in CSS3, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.