🧱CSS 背景图案生成

怎么用 CSS 背景图案生成器

1. 在图案库里挑一个图案 —— 全部用渐变绘制，不含图片，也不会产生额外请求。
2. 调整背景色、图案色、图案尺寸、线宽、不透明度和角度，右侧大图会实时更新。
3. 复制 CSS 贴到任意元素上，整个图案只需要一条 background 声明。

常见问题

为什么用 CSS 而不用 PNG？

渐变图案只有几百字节 CSS，在任何屏幕密度下都清晰，不产生 HTTP 请求，而且改一个颜色值或 CSS 变量就能整体换色。

图案会跟着页面滚动吗？

默认会。想固定可以加 background-attachment: fixed；另外注意大尺寸图案铺满整页时，在低端手机上会有一点绘制开销。

怎么让图案变淡或放到内容后面？

可以直接在这里调低图案不透明度，或者把图案放到 ::before 伪元素上，配合 position: absolute; inset: 0; z-index: -1;，这样正文仍然完全不透明。