阅读CSS Secrets（五）

Complex background patterns复杂的背景组合

网格，栅格

原理：用渐变色来生成背景图片，2种方向，垂直和水平，然后网格前半部分为实体颜色加半透明，后半部分全透明，即可生成

div{
  background:red;
  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;
  width:200px;
  height:200px;
}

1.png

使用固定的尺寸来代替百分比，来实现网格，注意：没加deg 是默认从上到下的渐变，加了90deg是左到右渐变

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

2.png

如何去实现一个可以维护性的网格：修改从而改变网格，不用批量修改：
实现原理：给定一个background，渐变色尽量使用透明来实现颜色变化

div{
  background:#59a;
  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:75px 75px,75px 75px,15px 15px,15px 15px;
  width:200px;
  height:200px;
}

该图先是2个大网格，75px 来实现分块，然后有小网格15px来实现颜色填充

3.png

将下面2个网格融合在一起就变成了上面那种

4.png

斑点花样

使用radial gradient 来制作圆，椭圆或者部分。radial-gradient(color size,color size) 当后者size为0时做为突变填充剩余部分

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

5.png

使用2种梯度条纹再加上background-position来实现更有趣的斑点图

.d1{
  width:180px;
  height:180px;
  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;
}

实现原理：本来两行重叠在一起的斑点图，然后对一行进行下右偏移平铺size的一半，形成交错效果。

6.png

制作棋盘

div{
  width:200px;
  height:200px;
  background:#eee;
  background-image:linear-gradient(45deg,#bbb 25%,transparent 0)
  ,linear-gradient(45deg,transparent 75%,#bbb 0);
  background-size:30px 30px;
}

1.png

当我们把下面的三角和上面的三角合并后 就成了一个正方形，
如果我们上下各有2个三角形，通过移动就可以生成2个正方形，然后平铺就成了棋盘状了

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

2.png

简化上述方法，效果一样，实现原理不一样

div{
  width:200px;
  height:200px;
  background: #eee; 
  background-image: 
  linear-gradient(45deg, rgba(0,0,0,.25) 25%, transparent 0, transparent 75%, rgba(0,0,0,.25) 0), linear-gradient(45deg,rgba(0,0,0,.25) 25%, transparent 0, transparent 75%, rgba(0,0,0,.25) 0); 
  background-position: 0 0, 15px 15px; 
  background-repeat:no-repeat;
  background-size: 30px 30px; 
}