一款好看的CSS背景填充库

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

uTools 1624419362385 - 一款好看的CSS背景填充库

引入:

<link href="https://unpkg.com/pattern.css" rel="stylesheet">

你也可以自己保存为CSS文件

用法:

颜色:

pattern.css 仅使用两种颜色构建transparentcurrentColor

currentColor 是元素内的当前活动文本颜色。要更改颜色,只需更改文本颜色属性。

要更改另一种颜色只需更改背景颜色,背景颜色将通过透明颜色可见。

ep:

<div class="pattern-checks-sm bg-blue white">...</div>

尺寸:

每个图案可在4种尺寸smmdlg,和xl

uTools 1624419925806 - 一款好看的CSS背景填充库

样式表:

小的中等的特大号
pattern-checks-smpattern-checks-mdpattern-checks-lgpattern-checks-xl
pattern-grid-smpattern-grid-mdpattern-grid-lgpattern-grid-xl
pattern-dots-smpattern-dots-mdpattern-dots-lgpattern-dots-xl
pattern-cross-dots-smpattern-cross-dots-mdpattern-cross-dots-lgpattern-cross-dots-xl
pattern-diagonal-lines-smpattern-diagonal-lines-mdpattern-diagonal-lines-lgpattern-diagonal-lines-xl
pattern-horizontal-lines-smpattern-horizontal-lines-mdpattern-horizontal-lines-lgpattern-horizontal-lines-xl
pattern-vertical-lines-smpattern-vertical-lines-mdpattern-vertical-lines-lgpattern-vertical-lines-xl
pattern-diagonal-stripes-smpattern-diagonal-stripes-mdpattern-diagonal-stripes-lgpattern-diagonal-stripes-xl
pattern-horizontal-stripes-smpattern-horizontal-stripes-mdpattern-horizontal-stripes-lgpattern-horizontal-stripes-xl
pattern-vertical-stripes-smpattern-vertical-stripes-mdpattern-vertical-stripes-lgpattern-vertical-stripes-xl
pattern-triangles-smpattern-triangles-mdpattern-triangles-lgpattern-triangles-xl
pattern-zigzag-smpattern-zigzag-mdpattern-zigzag-lgpattern-zigzag-xl

pattern.css还支持文字样式、图片样式穿插等,更多样式及使用方法请参照官网:https://bansal.io/pattern-css