pattern.css通过CSS库填充漂亮的图案到你的背景,小巧好用,样式多样,可玩性还很高。

引入:
<link href="https://unpkg.com/pattern.css" rel="stylesheet">
你也可以自己保存为CSS文件
用法:
颜色:
pattern.css 仅使用两种颜色构建transparent
和currentColor
。
currentColor 是元素内的当前活动文本颜色。要更改颜色,只需更改文本颜色属性。
要更改另一种颜色只需更改背景颜色,背景颜色将通过透明颜色可见。
ep:
<div class="pattern-checks-sm bg-blue white">...</div>
尺寸:
每个图案可在4种尺寸sm
,md
,lg
,和xl

样式表:
小的 | 中等的 | 大 | 特大号 |
pattern-checks-sm | pattern-checks-md | pattern-checks-lg | pattern-checks-xl |
pattern-grid-sm | pattern-grid-md | pattern-grid-lg | pattern-grid-xl |
pattern-dots-sm | pattern-dots-md | pattern-dots-lg | pattern-dots-xl |
pattern-cross-dots-sm | pattern-cross-dots-md | pattern-cross-dots-lg | pattern-cross-dots-xl |
pattern-diagonal-lines-sm | pattern-diagonal-lines-md | pattern-diagonal-lines-lg | pattern-diagonal-lines-xl |
pattern-horizontal-lines-sm | pattern-horizontal-lines-md | pattern-horizontal-lines-lg | pattern-horizontal-lines-xl |
pattern-vertical-lines-sm | pattern-vertical-lines-md | pattern-vertical-lines-lg | pattern-vertical-lines-xl |
pattern-diagonal-stripes-sm | pattern-diagonal-stripes-md | pattern-diagonal-stripes-lg | pattern-diagonal-stripes-xl |
pattern-horizontal-stripes-sm | pattern-horizontal-stripes-md | pattern-horizontal-stripes-lg | pattern-horizontal-stripes-xl |
pattern-vertical-stripes-sm | pattern-vertical-stripes-md | pattern-vertical-stripes-lg | pattern-vertical-stripes-xl |
pattern-triangles-sm | pattern-triangles-md | pattern-triangles-lg | pattern-triangles-xl |
pattern-zigzag-sm | pattern-zigzag-md | pattern-zigzag-lg | pattern-zigzag-xl |
pattern.css还支持文字样式、图片样式穿插等,更多样式及使用方法请参照官网:https://bansal.io/pattern-css