一、文字/图片模糊效果的基础原理
文字模糊效果通常是通过CSS的filter属性中的blur函数来实现的。blur()函数可以给元素添加一个模糊效果，其参数表示模糊的强度，单位为像素。
// 使用空格分隔多个滤镜 filter: none;
// 高斯模糊 filter: blur(4px);
// 线性亮度filter: brightness();
// 对比度filter: contrast();
// 阴影效果filter: drop-shadow();
// 灰度filter: grayscale();
// 色相旋转filter: hue-rotate();
// 反转图像filter: invert();
// 转换透明度filter: opacity();
// 饱和度filter: saturate();
// 褐色filter: sepia();
// SVG滤镜filter: url();
一、背景叠加让文字模糊效果
backdrop-filter
当你创造一个元素加上这个属性后，会使得这个元素后面的区域添加效果（如模糊或颜色偏移）
对比：
filter 属性必须要加载图像上或者背景图上，而 backdrop-filter 只要是一个元素就可以。
backdrop-filter: blur(2px);
backdrop-filter: brightness(60%);
backdrop-filter: contrast(40%);
backdrop-filter: drop-shadow(4px 4px 10px blue);
backdrop-filter: grayscale(30%);
backdrop-filter: hue-rotate(120deg);
backdrop-filter: invert(70%);
backdrop-filter: opacity(20%);
backdrop-filter: sepia(90%);
backdrop-filter: saturate(80%);
这里要注意的一点是，添加模糊后，实际的大小会超出我们设置的宽高，因为周围的毛边效果，你可以在外面包一层并设置 overflow: hidden;
注意事项
1、性能影响：文字模糊效果会增加浏览器的计算负担，特别是在移动设备上。因此，在使用文字模糊效果时，要考虑性能影响。
2、兼容性：filter属性在较旧的浏览器中可能不支持，因此在使用该属性时要注意兼容性问题。
3、过度使用：文字模糊效果虽然美观，但过度使用会降低页面的可读性。因此，在使用文字模糊效果时要注意适度。
