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
HTML table tag tutorial (8): background image attribute BACKGROUND
Set a background image for the table. You can use...
MySql index improves query speed common methods code examples
Use indexes to speed up queries 1. Introduction I...
A brief analysis of JS original value and reference value issues
Primitive values -> primitive types Number S...
A detailed introduction to the CSS naming specification BEM from QQtabBar
BEM from QQtabBar First of all, what does BEM mea...
How to set background blur with CSS
When making some pages, in order to make the page...
The latest Linux installation process of tomcat8
Download https://tomcat.apache.org/download-80.cg...
Detailed explanation of the implementation of WeChat applet track playback and the pitfalls encountered
WeChat applet trajectory playback mainly uses pol...
Solution to the problem that a Linux modification of MySQL configuration does not take effect
background I have a project service that uses AWS...
Write a formal blog using XHTML CSS
The full name of Blog should be Web log, which mea...
Rainbow button style made with CSS3
Result: Implementation code: html <div class=&...
Detailed explanation of the basic usage of the img image tag in HTML/XHTML
The image tag is used to display an image in a we...
Detailed explanation of the problem of mixed use of limit and sum functions in MySQL
Preface Today, after synchronizing the order data...
React+TypeScript project construction case explanation
React project building can be very simple, but if...
A graphic tutorial on how to install MySQL in Windows
Abstract: This article mainly explains how to ins...
JavaScript's unreliable undefined
undefined In JavaScript, if we want to determine ...