css实现类似element官网的磨砂屏幕效果

前言：

css实现类似element官网的磨砂屏幕效果

效果图：带有网格镂空背景的磨砂玻璃效果

原始图，背景是透明的可以看到下面内容

处理后的效果：磨砂质感

实现办法：

background-image:radial-gradient(transparent 1px,#fff 1px);
background-size:4px 4px;
backdrop-filter:saturate(50%) blur(4px);

解析：

1. 底层：一个由细微点阵构成的网格，提供了质感。

2. 上层：一个覆盖在整个元素上的饱和度和模糊滤镜，创造了磨砂感。

创建网格背景（质感基底）

background-image: radial-gradient(transparent 1px, #fff 1px);
background-size: 4px 4px;

• radial-gradient(transparent 1px, #fff 1px)：这创建了一个径向渐变 （圆形渐变）。它定义了一个从中心点开始，前 1 像素半径的区域是完全透明的 (transparent 1px) ，然后在 1 像素处立刻硬切到白色 (#fff 1px) 。由于没有平滑过渡，这实际上创造了一个非常小的、边缘锐利的白色圆点。

• background-size: 4px 4px：这行代码是关键。它将上面创建的白色小圆点背景，平铺成一个 4px × 4px 的无限重复的网格。

此时的效果是：一个布满极其细微的白色像素点的网格背景。因为点非常小（只有 1px 半径），间距也很小（4px），所以肉眼看起来可能只是一片轻微的、有颗粒感的白色，或者在某些背景下几乎看不出来，但它为整个效果提供了细微的纹理。

2. 实现磨砂感（核心效果）

backdrop-filter: saturate(50%) blur(4px);