CSS奇淫巧技:复杂背景图案——网格图、波点图的实现

语言: CN / TW / HK

theme: channing-cyan

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第12天。

知识点:CSS线性渐变,条纹背景

背景

我们还可以使用 CSS 来创建网格、波点、棋盘等图案,用 CSS 渐变几乎可以创建任何种类的集合图案,只是有时会不太好维护,需要借助 CSS 预处理器(比如 sass)来减少冗余代码。今天我们只介绍纯 CSS 的案例。

效果实现

网格/桌布

使用多个渐变图案组合实现。

```html

``` 实现效果图:

图片.png

我们还可以写出网格中每个格子大小可调,网格线条粗细固定的图案,这时我们使用长度而不是百分比作为色标的场景。 ```html

``` 实现效果图:

图片.png

波点图

简单波点

```html

``` 实现效果图:

图片.png

双层波点图

```html

``` 实现效果图:

图片.png

请注意,为了达到效果,第二层背景的偏移定位值必须是贴片宽高的一半。

css 还可以实现很多复杂的图案,那就需要大家发动自己聪明的小脑瓜去创造了,需要用到的知识也更加复杂,感兴趣的小伙伴自行摸索吧。

小工具分享

统计CSS代码的文件体积的小工具:点这 只要把你的 CSS 粘进去即可统计。