“ Pattern.css”是一个开源的css样式库,仅通过向任何元素添加特定的类即可应用各种背景图案。
有多种类型,例如检查,点,线,之字形等。由于它是CSS,因此可以轻松进行尺寸调整和颜色调整。
上图是分发站点的部分捕获,并且这些都是仅使用CSS复制的背景图案。
使用它时,加载必要的CSS并使用.pattern-{type}-{size}
诸如规则将一个类添加到要应用的元素中。
尺寸sm
,md
,lg
,xl
四,前面描述的类规则{size}
指定任何东西的一部分。{type}
指定要使用的背景类型,目前有以下12种可用。
- 支票
.pattern-checks-{size}
- 格
.pattern-grid-{size}
- 点
.pattern-dots-{size}
- 十字点
.pattern-cross-dots-{size}
- 对角线
.pattern-diagonal-lines-{size}
- 垂直线
.pattern-vertical-lines-{size}
- 水平线
.pattern-horizontal-lines-{size}
- 斜条纹
.pattern-diagonal-stripes-{size}
- 垂直条纹
.pattern-vertical-stripes-{size}
- 水平条纹
.pattern-horizontal-stripes-{size}
- 三角形
.pattern-triangles-{size}
- 之字形
.pattern-zigzag-{size}
基于上述内容,如果指定“中等尺寸检查图案” .pattern-checks-md
,“小尺寸对角线” .pattern-diagonal-lines-sm
等类别,则可以确认背景图案已应用于该零件。
此外,分发站点还介绍了特定的用法示例,例如分隔符,文本和图像修饰,因此我认为它们也将对参考有用。
关于文件读取,有多种可用的方法,例如通过npm,CDN,文件下载,因此您可以根据环境使用它。
另外,如果您想按自己的喜好对其进行更多自定义,则可以通过在SCSS 中$pattern-sizes
及其$dots
周围编辑值来处理它。
该许可证是MIT许可证。