原本的filter会影响整个元素本身及内部所有内容，而我只需要背景效果是毛玻璃
这时需要使用backdrop-filter作用于元素背后的背景内容，而非元素本身或其直接子元素。换句话说，它是对元素下层背景（透过该元素透明部分可见的元素或背景）应用滤镜效果。
下面代码使用伪元素位于背景之上，内容之下，实现上方效果。
.container {
position: fixed;
width: 100%;
height: 100vh;
overflow: hidden;
background: url('your-background-image.jpg') no-repeat center / cover;
}
.container::before {
content: "";
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;//确保处于背景和内容之间
backdrop-filter: blur(8px);
background-color: rgba(0, 0, 0, 0.5);
}
.container > .content {
position: relative;
z-index: 1;
}
其他滤镜效果
blur()：给元素添加模糊效果，值越大越模糊。
brightness()：调整元素的亮度，值大于1增加亮度，小于1降低亮度。
contrast()：调整元素的对比度，值大于1增加对比度，小于1降低对比度。
grayscale()：将元素转为灰度图像，值为1表示完全灰度。
hue-rotate()：旋转元素的色相，值为角度，例如90deg表示顺时针旋转90度。
invert()：将元素的颜色反转，值为1表示完全反转。
saturate()：调整元素的饱和度，值大于1增加饱和度，小于1降低饱和度。
sepia()：将元素转为深褐色（复古）效果，值为1表示完全深褐。
这些滤镜函数可以单独使用，也可以组合使用，通过在filter属性中使用空格分隔。例如，filter: blur(5px) brightness(120%)表示给元素应用5像素的模糊效果，并增加其亮度为120%。
