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

Tutorial diagram of installing mysql8.0.18 under linux (Centos7)

Blog

Understand the rendering process of HTML pages in preparation for learning front-end performance optimization (continued)

Blog

Detailed explanation of the difference between run/cmd/entrypoint in docker

How to set background blur with CSS

Tutorial diagram of installing mysql8.0.18 under linux (Centos7)

Understand the rendering process of HTML pages in preparation for learning front-end performance optimization (continued)

Detailed explanation of the difference between run/cmd/entrypoint in docker

Automatic line breaks in html pre tags

JavaScript to achieve digital clock effect

vue+elementui implements the complete code of adding and modifying a shared bullet box

HTML table tag tutorial (23): row border color attribute BORDERCOLORDARK

How is a SQL statement executed in MySQL?

Detailed explanation of the use of vue-resource interceptors

Detailed explanation of MySQL database tens of millions of data query and storage

Recommend

Awk command line or script that helps you sort text files (recommended)

Solution to the problem that docker logs cannot be retrieved

Detailed explanation of commands to view linux files

Mac VMware Fusion CentOS7 configuration static IP tutorial diagram

Theory: The two years of user experience

Use the sed command to modify the kv configuration file in Linux

Sharing tips on using scroll bars in HTML

Tutorial on Migrating Projects from MYSQL to MARIADB

Docker deploys mysql remote connection to solve 2003 problems

HTML code text box limit input text box becomes gray limit text box input

Solution to the failure of docker windows10 shared directory mounting

How to receive binary file stream in Vue to realize PDF preview

3 methods to restore table structure from frm file in mysql [recommended]

mysql group_concat method example to write group fields into one row

Vue implements countdown function