任务路径 / 从输入到结果
如何创建 CSS 背景图案
- 01
选择图案
打开“图案”，选择“圆点”“网格”或“斜纹”。三者都只由 CSS 渐变构成——任何环节都不涉及图片文件。
- 02
设置平铺单元
把“平铺尺寸”选在 8 到 96 px 之间，把“标记宽度”选在 1 到 16 px 之间。标记宽度不能超过平铺尺寸的一半；否则状态会显示“检查取值”并给出确切规则。
- 03
选择两种颜色
“图案颜色”绘制标记，“画布颜色”填充标记下方的底色。预览会把结果铺满整个面板，便于按真实比例判断平铺效果。
- 04
按真实比例判断重复效果
预览会把结果平铺到整个面板，对比度太弱和平铺过密的问题在这里最容易暴露。经验法则：图形保持远小于平铺单元的一半——28 px 单元上的 2 px 图形读作纹理，而不是噪点。
- 05
复制图案 CSS
点“复制 CSS”，或点“下载 .css”保存 toolars-background-pattern.css。.pattern 规则只有三条声明——background-color、background-image 和 background-size——可以直接套用到任何元素上。
- 06
应用并调整规则
这条规则只绘制背景，放到任何元素上都没有布局副作用。之后可以调整 background-size 改变图案密度；当图案与文字冲突时，降低两种颜色的对比度，而不是缩小图形。