特效
Dot Glass
点阵开孔毛玻璃组件：一种「反直觉」的玻璃效果，只在点阵孔洞里露出背后内容的模糊（blur），其余区域是纯色盖板遮挡，适用于 Header、Navbar 等需要特殊视觉效果的场景。
glassblurbackdropheadernavbareffectdotmask
快速预览
查看 Dot Glass 组件的基本效果
白底黑字
左侧 50% 覆盖
黑底白字
左侧 50% 覆盖
基本用法
使用 Dot Glass 组件的基础示例
导入组件
import { DotGlass } from "@/components/qiuye-ui/dot-glass";使用组件
<DotGlass
className="absolute inset-0 left-1/2"
dotSize={3}
dotGap={6}
blur={4}
saturation={140}
glassAlpha={0.45}
coverColor={"#ffffff"}
></DotGlass>组件演示
查看组件的各种使用方式和效果
Playground：拖拽对比 + 参数调节
预览区固定展示两种场景：白底黑字 & 黑底白字。拖拽手柄（或用滑块） 调整 DotGlass 覆盖宽度，对比“有/无 DotGlass”的差异。
白色背景 · 黑色文字
文本内容
看 dot 内的模糊
这里模拟常见的标题/段落/按钮布局，方便观察 blur、saturation 的变化效果。
色块/图表
便于看饱和度
提示
推荐先把 coverColor 设为与背景一致（白/黑），再调 blur、dotFade 观察差异。
DotGlass
原始
黑色背景 · 白色文字
文本内容
看 dot 内的模糊
这里模拟常见的标题/段落/按钮布局，方便观察 blur、saturation 的变化效果。
色块/图表
便于看饱和度
提示
推荐先把 coverColor 设为与背景一致（白/黑），再调 blur、dotFade 观察差异。
DotGlass
原始
50%（左侧 DotGlass）
为了获得“点阵开孔”的干净对比，建议让 coverColor 与场景背景 接近：白底用白色，黑底用接近黑色的颜色。
白底场景
黑底场景
3
6
0
4
130
0.45