How to set background blur with CSS

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

Recommend

The whole process of installing gogs with pagoda panel and docker

Table of contents 1 Install Docker in Baota Softw...

How to implement animation transition effect on the front end

Table of contents Introduction Traditional transi...

JavaScript lazy loading detailed explanation

Table of contents Lazy Loading CSS styles: HTML p...

MySQL scheduled task example tutorial

Preface Since MySQL 5.1.6, a very unique feature ...

Vue uses canvas to realize image compression upload

This article shares the specific code of Vue usin...

Specific use of ES6 array copy and fill methods copyWithin() and fill()

Table of contents Batch copy copyWithin() Fill ar...

Analysis of the process of building a cluster environment with Apache and Tomcat

In fact, it is not difficult to build an Apache c...

Detailed explanation of MySQL phantom reads and how to eliminate them

Table of contents Transaction Isolation Level Wha...

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

sed is a character stream editor under Unix, that...

Using NTP for Time Synchronization in Ubuntu

NTP is a TCP/IP protocol for synchronizing time o...

Mac installation mysqlclient process analysis

Try installing via pip in a virtual environment: ...

MySQL learning notes: complete select statement usage example detailed explanation

This article uses an example to illustrate the co...

Implementation code of short video (douyin) watermark removal tool

Table of contents 1. Get the first link first 2. ...

JavaScript array merging case study

Method 1: var a = [1,2,3]; var b=[4,5] a = a.conc...

Detailed implementation plan of Vue front-end exporting Excel files

Table of contents 1. Technology Selection 2. Tech...