How to set background blur with CSS

When making some pages, in order to make the pages look better, we often need to set some background images. However, when the background images are too fancy, it will affect our main content, so we need to use the filter attribute to set its blur value.

The html code is as follows

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="cover">
  <h1>I am the content that needs to be highlighted</div>
</body>
</html>

But if you use it directly on the background image,

.cover{
    width:600px;
    height:300px;
    position:relative;
    text-align:center;
    line-height:300px;
    color:white;
    background:transparent url(http://91jean.oss-cn-hangzhou.aliyuncs.com/18-8-31/16567303.jpg) center center no-repeat;
    filter:blur(5px);
    background-size:cover;
}

The following situation may occur.

We will find that both the background and the main content have become blurred.

Solution: Add a pseudo element to the background image, set the background image and filter attributes on the pseudo element. The specific code is as follows

.cover{
    width:600px;
    height:300px;
    position:relative;
    text-align:center;
    line-height:300px;
    color:white;
}

.cover::before{    
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:600px;
    height:300px;
    background:transparent url(http://91jean.oss-cn-hangzhou.aliyuncs.com/18-8-31/16567303.jpg) center center no-repeat;
    filter:blur(5px);
    z-index:-1;
    background-size:cover;
}

Summarize

The above is the implementation method of setting background blur with CSS introduced by the editor. I hope it will be helpful to everyone. 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 their support of the 123WORDPRESS.COM website!

<<: JavaScript to implement retractable secondary menu

>>: Use the docker build kit to build a Docker image that can be used on the Raspberry Pi