Three ways to achieve background blur in CSS3 (summary)
|
1. Normal background blur Code:
<Style>
html,
body {
width: 100%;
height: 100%;
}
* {
margin: 0;
padding: 0;
}
/*Blurred background*/
.bg {
width: 100%;
height: 100%;
position: relative;
background: url("./bg.jpg") no-repeat fixed;
background-size: cover;
box-sizing: border-box;
filter: blur(2px);
z-index: 1;
}
.content {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
text-align: center;
z-index: 2;
}
</Style>
</head>
<body>
<div class="bg">
<div class="content">Blurred background</div>
</div>
</body>The effect is as follows:
Writing like this will make the entire div's descendants blurry and white edges will appear, making the page very unsightly. To solve this problem, we can use pseudo-elements, because the blurriness of pseudo-elements will not be inherited by the descendants of the parent element. Code:
<Style>
html,
body {
width: 100%;
height: 100%;
}
* {
margin: 0;
padding: 0;
}
/*Blurred background*/
.bg {
width: 100%;
height: 100%;
position: relative;
background: url("./bg.jpg") no-repeat fixed;
background-size: cover;
box-sizing: border-box;
z-index: 1;
}
.bg:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
/* Inherit the background property settings from the parent element */
background: inherit;
filter: blur(2px);
z-index: 2;
}
.content {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
text-align: center;
z-index: 3;
}
</Style>
</head>
<body>
<div class="bg">
<div class="content">Blurred background</div>
</div>
</body>The effect is as follows:
2. Partial background blur After you have mastered the previous effect, the local blur effect will be relatively simple. Code:
<Style>
html,
body {
width: 100%;
height: 100%;
}
* {
margin: 0;
padding: 0;
}
/*Blurred background*/
.bg {
width: 100%;
height: 100%;
position: relative;
background: url("./bg.jpg") no-repeat fixed;
background-size: cover;
box-sizing: border-box;
z-index: 1;
}
.content {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
background: inherit;
z-index: 2;
}
.content:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background: inherit;
filter: blur(15px);
/*To make the blur more obvious, increase the blur*/
z-index: 3;
}
.content>div {
width: 100%;
height: 100%;
text-align: center;
line-height: 200px;
position: absolute;
left: 0;
top: 0;
z-index: 4;
}
</Style>
</head>
<body>
<div class="bg">
<div class="content">
<div>Partial background blur</div>
</div>
</div>
</body>The effect is shown in the figure below:
3. Partial background clarity Code:
<Style>
html,
body {
width: 100%;
height: 100%;
}
* {
margin: 0;
padding: 0;
}
/*Blurred background*/
.bg {
width: 100%;
height: 100%;
position: relative;
background: url("./bg.jpg") no-repeat fixed;
background-size: cover;
box-sizing: border-box;
z-index: 1;
}
.bg:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background: inherit;
filter: blur(5px);
z-index: 2;
}
.content {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 200px;
line-height: 200px;
text-align: center;
background: inherit;
z-index: 3;
box-shadow: 0 0 10px 6px rgba(0, 0, 0, .5);
}
</Style>
</head>
<body>
<div class="bg">
<div class="content">
<div>Partial background is clear</div>
</div>
</div>
</body>The effect is shown in the figure below:
This concludes this article about three ways to achieve background blur with CSS3. For more relevant CSS3 background blur content, please search 123WORDPRESS.COM’s previous articles or continue browsing the related articles below. I hope you will support 123WORDPRESS.COM in the future! |
<<: Implementation of restoring data by directly copying files in the data directory in mysql
>>: Detailed explanation of Vue's monitoring properties
Recommend
Detailed explanation of how Node.js middleware works
Table of contents What is Express middleware? Req...
Detailed example of deploying Nginx+Apache dynamic and static separation
Introduction to Nginx dynamic and static separati...
Overview of MySQL Statistics
MySQL executes SQL through the process of SQL par...
Detailed process of building mongodb and mysql with docker-compose
Let's take a look at the detailed method of b...
Detailed explanation of MySQL master-slave inconsistency and solutions
1. MySQL master-slave asynchrony 1.1 Network Dela...
How to use JSZip compression in CocosCreator
CocosCreator version: 2.4.2 Practical project app...
Summary of various methods for JavaScript to determine whether it is an array
Table of contents Preface Array.isArray construct...
Solution to the lack of my.ini file in MySQL 5.7
What is my.ini? my.ini is the configuration file ...
Two ways to configure Vue global methods
Table of contents 1. Introduction 2. The first me...
MySQL uses variables to implement various sorting
Core code -- Below I will demonstrate the impleme...
A brief discussion on the display modes of HTML tags (block-level tags, inline tags, inline block tags)
During today's lecture, I talked about the di...
MySQL query method with multiple conditions
mysql query with multiple conditions Environment:...
Vue3 setup() advanced usage examples detailed explanation
Table of contents 1. Differences between option A...
A brief discussion on the difference between MYSQL primary key constraint and unique constraint
Table of contents Primary key constraint Unique C...
How to remove the "Enter" in the form, "Submit" and "Enter != Submit"
To implement the "Enter != Submit" probl...