《css揭秘》笔记（六），复杂背景图案

复杂背景图案

网格

把水平条纹与垂直条纹叠加起来就能得到各种样式的网格：

.box1{
  width: calc(210px - 15px);
  height: calc(210px - 15px);
  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;
}

在一些情况下，我们希望每个格子的大小可以调整，而网格线的粗细可以调整：

.box2{
  margin: 20px;
  width: 200px;
  height: 200px;
  background: #58a;
  background-image: 
    linear-gradient(white 1px, transparent 0),
    linear-gradient(90deg, white 1px,transparent 0);
  background-size: 30px 30px;
}

我们甚至可以把两幅不同线宽、不同颜色的网格叠加起来，得到更加逼真的蓝图网格：

.box3{
  margin: 20px;
  width:200px;
  height: 200px;
  background: #58a;
  background-image: 
    linear-gradient(white 2px, transparent 0),
    linear-gradient(90deg, white 2px,transparent 0),
    linear-gradient(hsla(0,0%,100%,.3) 1px,transparent 0),
    linear-gradient(90deg,hsla(0,0%,100%,.3) 1px,transparent 0);
  background-size: 
    100% 75px ,75px 100%,
    100% 15px, 15px 100%;
}

波点

径向渐变允许我们创建圆形、椭圆或是它们中的一部分，能够创建的最简单图案是圆点的阵列：

.box4{
  width: 100px;
  height: 100px;
  background: #655;
  background-image: radial-gradient(tan 30%,transparent 0);
  background-size: 30px 30px;
}

然而此时生成的波点还不够实用，可以生成两层圆点阵列图案，并把它们错开。

.box5{
  margin: 10px;      
  width: 100px;
  height: 100px;
  background: #655;
  background-image: 
    radial-gradient(tan 30%,transparent 0),
    radial-gradient(tan 30%,transparent 0);
  background-size: 30px 30px;
  background-position: 0 0,15px 15px;

棋盘图案

我们可以利用两个45度线性渐变形成的三角形图案拼合形成小正方形形状的背景：

.box5{
  margin: 10px;
  width: 100px;
  height: 100px;
  background: #655;
  background-image:
    radial-gradient(tan 30%,transparent 0),
    radial-gradient(tan 30%,transparent 0);
  background-size: 30px 30px;
  background-position: 0 0,15px 15px;
}

第二层渐变的位置值之所以是75%，是因为小三角形占据大方块的四分之一，而其余均为大方块的背景色，又用于线性渐变从底往上，所以首先要设定透明背景色。

此时尚未到达我们想要的效果，只需将第二层渐变在水平和垂直方向均移动贴片长度的一半，就可以将它们拼合成完整的方块：

.box7{
  margin: 10px;
  width: 100px;
  height: 100px;

  background-color: #eee;
  background-image:
    linear-gradient(45deg,#bbb 25%, transparent 0),
    linear-gradient(45deg, transparent 75%, #bbb 0);
  background-position: 0 0,15px 15px;
  background-size: 30px 30px;
}

可以看到两个小三角形之间依然存在着空隙，可以稍稍调整三角形颜色的位置值（transparent前的参数`）。

但实际上这依然只是我们想要的棋盘效果的一半，这时我们可以根据这一半的效果复刻出另一半，只需要稍稍调整它的背景位置值background-position。

.box8{
  margin: 10px;
  width: 120px;
  height: 120px;

  background-color: #eee;
  background-image:
    linear-gradient(45deg,#bbb 25%, transparent 0),
    linear-gradient(45deg, transparent 74%, #bbb 0),
    linear-gradient(45deg, #bbb 25%, transparent 0),
    linear-gradient(45deg, transparent 75%,#bbb 0);
  background-position: 
    0 0, 15px 15px,
    15px 15px, 30px 30px;
  background-size: 30px 30px;
}

当你看到这个效果形成的小正方形左上角并不是（0，0），可能会对background-position从（0,0）开始感到疑惑，因为这是background-position决定的是整个背景的起始位置，而由于线性渐变默认从底部网上，所以（0，0）是属于线性渐变透明色的，而灰色则处于背景的底部。

这个代码还可以进行优化，比如把处在贴片顶角的三角形两两组合起来（即把第一组和第二组合并成一层渐变，把第三组和第四组合并成一组渐变），然后还可以把深灰色改成半透明的黑色，这样只需修改底色就能改变整个棋盘的色调。

.box9{
  width: 100px;
  height: 100px;
  margin: 10px;

  background: #eee;
  background-image: 
    linear-gradient(45deg,rgba(0,0,0,.25) 25%,transparent 0, transparent 76%, rgba(0,0,0,.25) 0),
    linear-gradient(45deg, rgba(0,0,0,.25) 25%,transparent 0, transparent 74%, rgba(0,0,0,.25) 0);
  background-position: 0 0, 15px 15px;
  background-size: 30px 30px;
}

本文内容是《css揭秘》一书的笔记，
如果侵犯到原著作者的权益，请联系我删除。