backdrop-filter：为元素后面区域添加图形效果
该属性可以让你为一个元素后面区域（即背景区域）添加图形效果（如模糊或颜色偏移）。它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。作用于元素背后的区域所覆盖的所有元素
与filter的区别：filter作用于元素本身，backdrop-filter作用于元素背后的区域所覆盖的所有元素。
backdrop-filter: <filter-function>
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body,
html {
width: 100%;
height: 100%;
}
.bg {
background: url("https://img1.baidu.com/it/u=1678478611,2011823497&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800");
background-size: cover;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.bg div {
width: 200px;
height: 200px;
background-color: rgba(255, 255, 255, 0.3);
}
.bg .filter {
//下面的过滤器函数示例均改动这里
backdrop-filter: blur(16px);
}
</style>
</head>
<body>
<div class="bg">
<div class="filter">
hello world!
</div>
</div>
</body>
</html>
<filter-function>是CSS数据类型，代表可以改变输入图像外观的图形效果，可以用于filter和backdrop-filter属性，可选的过滤器函数有：
-
blur(radius)：模糊图像。radius代表了模糊半径backdrop-filter: blur(16px);
-
brightness(amount)：让图像更明亮或更暗淡。amount表示输出亮度，是一个百分数(小数)，大于100%变亮，小于100%变暗backdrop-filter: brightness(320%);
-
contrast(amount)：增加或减少图像的对比度。amount表示输出的对比度，是一个百分数(小数)，大于1会增加对比度，小于1降低对比度backdrop-filter: contrast(300%);
-
drop-shadow(offset-x offset-y blur-radius spread-radius color)：在图像后方应用投影offset-x指定水平距离，其中负值将阴影放置到元素的左侧。offset-y指定垂直距离，其中负值将阴影置于元素之上。如果两个值都为0，则阴影直接放置在元素后面。
blur-radius阴影的模糊半径
spread-radius阴影的扩展半径。正的值会导致阴影扩大和变大，而负的值会导致阴影缩小，未指定则默认为0，大多数浏览器不支持这个参数color阴影的颜色filter: drop-shadow(30px 10px 4px blue); //backdrop-filter使用没有效果
-
grayscale(amount)：将图像转变为灰度图。amount表示转变值的大小，是一个百分数(小数)，0% 时与原图没有区别。0% 到 100% 之间的值会使灰度线性变化。amount 为空时使用值为1backdrop-filter: grayscale(1);
-
hue-rotate(angle)：改变图像的整体色调。angle表示输入样本的色调的相对变化，指定为角度，如hue-rotate(180deg)backdrop-filter: hue-rotate(90deg);
-
invert(amount)：反转图像颜色。amount表示转换量，是一个百分数(小数)。100%的值完全反转，而0%的值使输入保持不变。0%到100%之间的值是效果的线性乘数。插值的初始值为0。backdrop-filter: invert(1);
-
opacity(amount)：改变图像透明度。amount表示转化的数值。是一个百分数(小数)，值为0%是完全透明的，值为 100% 会保留原来的效果。值在 0% 与 100% 之间效果为线性变化的，参数的最小差值为 1。filter: opacity(45%); //backdrop-filter使用没有效果
-
saturate(amount)：超饱和或去饱和输入的图像。amount表示转换量。是一个百分数(小数)，低于100%使图像去饱和，而高于100%使图像超饱和。值0%为完全不饱和，而值为100%保持输入不变。插值的初始值为。backdrop-filter: saturate(350%);
-
sepia(amount)：将图像转为棕褐色。amount表示转换量，是一个百分数(小数)，100%的值完全是棕褐色的，而0%的值使输入保持不变。0%到100%之间的值是效果的线性乘数。插值的初始值为0。backdrop-filter: sepia(1);