Let’s talk about the basics without getting too verbose. Sometimes the front-end will encounter the need to blur the background but require clear content. Let’s take a look at the effect first:
The following is the specific implementation:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>Background blur</title></head><body> <div class=main><!-- The following The background is blurred and other content is clear--><!-- Content layer--> <div class=banner> <div class=banner-contain> <h1>I am the content</h1> </div><! -- Background layer --> <div class=banner-bg></div> </div> </div> <style> .main{ width: 100%; } .banner{ width: 100%; position: relative; } .banner-bg{ width: 100%;/*The width fills the screen*/ padding-top: 52.734%;/*The image height is divided by the width to get this value*/ background: url(test.jpg)center center no-repeat;/*The two centers are horizontal and vertical alignment respectively*/ background-size: 100%;/*The background is horizontally spread*/ filter:blur(10px); /*Blur value, the larger it is, the blurr it is*/ } .banner-contain{ position: absolute;/*Set the absolute positioning of the content layer*/ width: 100%; text-align: center; z-index: 6;/*Bring content to the top*/ margin-top: 6%; } </style></body></html> 1. Adaptive implementation:Set the padding-top of the div tag to a percentage. The padding and margin percentage values are calculated based on the width rather than the screen height, so you can set an adaptive area accordingly. For example, the image information is as follows
Then the height-to-width ratio is: 540/1024, which is about 52.734%, that is, the height is 52.734% of the width. Here the width is set to 100%, then padding-top of the width is 52.734%*100%
Set up two layers, one is the background blur layer, adaptively supports the entire outer div container, sets the blur value through filter:blur() attribute, the other is the content layer, absolute positioning, set z-index to increase the content layer Layers are prevented from being blocked so that the content layer is not affected by blurring
The above is the example code that the editor introduces to you on the front end to achieve background blur but with clear and adaptive content. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for your support of the VeVb martial arts website!
If you think this article is helpful to you, you are welcome to reprint it, please indicate the source, thank you!