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

Example of using CSS3 to customize the style of input multiple-select box

How to set background blur with CSS

Example of using CSS3 to customize the style of input multiple-select box

Learn about CSS label display mode in one article

How to export mysql table structure to excel

Native js custom right-click menu

How to quickly use mysqlreplicate to build MySQL master-slave

CSS3 creates 3D cube loading effects

Solve the Docker x509 insecure registry problem

Installation method of mysql-8.0.17-winx64 under windows 10

Why web page encoding uses utf-8 instead of gbk or gb2312?

The Linux operating system uses Python to implement the visualization function of the task manager

Recommend

Solve the problem that the VMWare virtual machine centos time is inconsistent with the local time

Summary of naming conventions for HTML and CSS

Summary of MySQL InnoDB architecture

Install tomcat and deploy the website under Linux (recommended)

Several ways to change MySQL password

Solve the problem that await does not work in forEach

Solution to Apache cross-domain resource access error

Summary of MySQL password modification methods

A brief discussion on the correct posture of Tomcat memory configuration

Analysis of the cause of docker error Exited (1) 4 minutes ago

JavaScript+HTML to implement student information management system

Linux system prohibits remote login command of root account

Linux echo text processing command usage and examples

How to Easily Remove Source Installed Packages in Linux

Tutorial on installing and configuring MySql5.7 in Alibaba Cloud ECS centos6.8