CSS背景模糊--backdrop-filterCSS背景模糊--backdrop-filter 实现的效果如上图所示。
站长
· 阅读数 25
CSS背景模糊--backdrop-filter
实现的效果如上图所示。
什么是 backdrop-filter
backdrop-filter CSS 属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。 因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。
filter CSS属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像，背景和边框的渲染。
backdrop-filter 与 filter 非常类似，可以取的值都是一样的，但是一个是作用于整个元素，一个是只作用于元素后面的区域。
backdrop-filter：developer.mozilla.org/zh-CN/docs/…
backdrop-filter 兼容性问题
以上效果的代码如下：
<!DOCTYPE html>
<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>
<!-- 方式一：backdrop-filter -->
<div class="container">
<div class="box">
<p>backdrop-filter: blur(10px)</p>
</div>
</div>
<!-- 方式二：filter+伪元素 -->
<div class="cover">
<h1>filter: blur(10px)</h1>
</div>
<!-- 方式二：filter -->
<div class="container3">
<div class="bg bg-blur"></div>
<div class="content content-front">filter: blur(10px)</div>
</div>
</body>
</html>
如何兼容？
在元素的背后，叠加一张同样的图片，利用 background-attachment: fixed 将叠加在元素下面的图片定位到与背景相同的坐标，再使用 filter: blur() 对其进行模糊处理即可。效果如下：
代码如下：
<!DOCTYPE html>
<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>
转载自:https://juejin.cn/post/7037409273009143839