图案背景生成器

如何使用

1. 选类型：条纹、圆点、网格或棋盘。每种都从一个小单元平铺而成，屏幕再大接缝也不会断。
2. 设平铺尺寸，也就是重复单元：24 px 是细密质感，60 px 以上就是一个有存在感的图形母题。
3. 条纹可以拖角度旋转重复单元。其余三种用不到角度，滑块会自动禁用。
4. 选前景色画母题、背景色填空隙，预览框里即时平铺。
5. 复制代码。CSS 片段直接套到任意 HTML 元素上；SVG 片段把同样的几何包进 <pattern> 元素，供导出与设计工具使用。

常见用途

• 区块与卡片背景 —— 定价表、功能网格后面垫一层低对比圆点。
• 印刷与演示幻灯片 —— SVG 图案缩放不糊，位图贴图做不到。
• 空状态与登录页 —— 小角度条纹添质感，又不抢焦点。
• 线框图 deck —— 棋盘填充标记占位区，视觉上仍然安静。

为何保证隐私

所有取值都在页面内变成代码，预览用的就是它生成的那段 CSS。没有上传，图案图片也从不在服务端生成。

常见问题

问：圆点和网格为什么禁用角度滑块？ 答：这两种图案由轴对齐的单元构成：一个圆加两条直线。旋转它们需要外包一层 transform，片段刻意避开，所以角度只对斜向条纹生效。

问：怎么只让图案覆盖页面的一部分？ 答：把 CSS 套到具体元素上而不是 body。片段里的 .pattern-area 类名就是留给你改成标记里的类名的。

问：能叠加两种图案吗？ 答：可以。CSS 支持多层背景，再粘一行 background-image 并各自给 background-size 即可。想让两层都显出来，给靠上那层留点透明。

问：选 CSS 还是 SVG？ 答：浏览器里渲染的东西用 CSS 块；目标物是设计工具、PDF 或图片导出时用 SVG 块 —— CSS 渐变在这些场景里带不走。