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 为空时使用值为1
```
backdrop-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);
```