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

知识点：CSS线性渐变，条纹背景

背景

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

效果实现

网格/桌布

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

<div class="bg"></div>
<style>
.bg{
  width: 500px;
  height: 500px;
  background: white;
  background-image: linear-gradient(90deg, rgba(200, 0, 0, .5)50%, transparent 0),
                    linear-gradient(rgba(200, 0, 0, .5)50%, transparent 0);
  background-size: 30px 30px;
}
</style>

实现效果图：

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

<div class="bg"></div>
<style>
.bg{
  width: 500px;
  height: 500px;
  background: #58a;
  background-image:
        linear-gradient(white 1px, transparent 0),
        linear-gradient(90deg, white 1px, transparent 0);
  background-size: 30px 30px;
}
</style>

实现效果图：

波点图

简单波点

<div class="bg"></div>
<style>
.bg{
  width: 500px;
  height: 500px;
  background: #eee;
  background-image: radial-gradient(#fff 20%, transparent 0);
  background-size: 30px 30px;
}
</style>

实现效果图：

双层波点图

<div class="bg"></div>
<style>
.bg{
  width: 500px;
  height: 500px;
  background: #655;
  background-image:
        radial-gradient(tan 20%, transparent 0),
        radial-gradient(tan 20%, transparent 0);
  background-size: 30px 30px;
  background-position: 0 0, 15px 15px;
}
</style>

实现效果图：

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

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

小工具分享

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