css：使用filter和backdrop-filter实现高斯

一、文字/图片模糊效果的基础原理

文字模糊效果通常是通过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、过度使用：文字模糊效果虽然美观，但过度使用会降低页面的可读性。因此，在使用文字模糊效果时要注意适度。