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

Editor to share with you how to use css to achieve simple background blur, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Css style:

.cover {

Width:600px

Height:300px

Position:relative

Text-align:center

Line-height:300px

Color:#fff

Margin:20pxauto

}

.cover:: before {

Content: ""

Position:absolute

Top:0

Left:0

Width:600px

Height:300px

Background:transparenturl (Images/picture/5.jpg) centercenterno-repeat

Filter:blur (8px)

Z-index:-1

Background-size:cover

}

HTML structure:

The background is blurry and the text is clearly displayed.

The above is all the content of the article "how to use css to achieve simple background blur". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.