The CSS background is blurred –backdrop bath-filter
The result is shown above.
What is thebackdrop-filter
The gorgeous-filter CSS property allows you to add graphical effects (such as blur or color offset) to the area behind an element. Because it applies to all elements behind the element, the element or its background must be at least partially transparent in order to see the effect.
The filter CSS attribute applies graphical effects such as blur or color offset to elements. Filters are usually used to adjust images, backgrounds and border renderings.
Backdrop backdrop filter is very similar to filter. The values can be the same, but one applies to the whole element and the other applies only to the area behind the element.
Backdrop-filter:developer.mozilla.org/zh-CN/docs/…
Filter:developer.mozilla.org/zh-CN/docs/…
Compatibility of the bath-filter is a problem
The code for the above effects is as follows:
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<title>Document</title>
<style>
html.body {
height: 100%;
width: 100%;
}
body {
background-image: url('https://qn.huat.xyz/mac/20211203155112.png');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
.container {
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
width: 343px;
height: 170px;
margin: 0 auto 40px;
border-radius: 24px;
background-image: url('https://qn.huat.xyz/mac/20211203155112.png');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
.box {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
background-color: rgba(255.255.255.0.3);
border-radius: 24px;
font-family: sans-serif;
font-size: 24px;
text-align: center;
line-height: 1;
color: white;
}
.cover {
width: 343px;
height: 170px;
position: relative;
text-align: center;
line-height: 170px;
color: white;
margin: 0 auto 40px;
}
.cover::before {
content: ' ';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 343px;
height: 170px;
background: transparent url('https://qn.huat.xyz/mac/20211203155112.png') center center no-repeat;
filter: blur(10px);
z-index: -1;
background-size: cover;
}
.bg {
background: url('https://qn.huat.xyz/mac/20211203155112.png');
width: 343px;
height: 170px;
text-align: center;
line-height: 600px;
margin: 0 auto;
}
.bg-blur {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 343px;
height: 170px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
-webkit-filter: blur(10px);
-moz-filter: blur(10px);
-o-filter: blur(10px);
-ms-filter: blur(10px);
filter: blur(10px);
}
.content {
color: #ffffff;
font-size: 24px;
}
.content-front {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 343px;
height: 170px;
line-height:170px;
text-align: center;
}
</style>
</head>
<body>
<! Then we could add water and support for the bridge.
<div class="container">
<div class="box">
<p>backdrop-filter: blur(10px)</p>
</div>
</div>
<! -- Method 2: filter+ pseudoelement -->
<div class="cover">
<h1>filter: blur(10px)</h1>
</div>
<! -- Method 2: filter -->
<div class="container3">
<div class="bg bg-blur"></div>
<div class="content content-front">filter: blur(10px)</div>
</div>
</body>
</html>
Copy the codeHow compatible?
Superimpose a same picture behind the element. Use background-attachment: fixed to position the picture superimposed below the element to the same coordinate with the background, and then use filter: blur() to blur it. The effect is as follows:
The code is as follows:
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<title>Document</title>
<style>
body {
height: 100vh;
background-image: url('https://qn.huat.xyz/mac/20211203155112.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
.flex{
display: flex;
justify-content: center;
align-items: center;
}
.box {
flex-direction: column;
position: relative;
width: 600px;
height: 300px;
overflow: hidden;
z-index: 10;
background-color: rgba(255.255.255.0.5);
font-size: 24px;
color: #fff;
}
.box::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url('https://qn.huat.xyz/mac/20211203155112.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
filter: blur(10px);
z-index: -1;
}
</style>
</head>
<body class="flex">
<div class="flex box">
<p>background-attachment: fixed</p>
<p>filter: blur(10px)</p>
</div>
</body>
</html>
Copy the code