@复杂的背景图案

今天娃娃来和大家一起画桌布，各种各样的格子桌布和点点桌布

总的来说，就是铺上几层不同的background，把多个渐变图案组合起来，让它们透过彼此的透明区域显示出来。
来先画个红格子哒：

CSS Secrets @复杂的背景图案 - CSS娃娃 - CSS娃娃的博客

宝宝们一眼就能看出来，这个红格子是通过一个个横条和一个个竖条组成的，而且宽度一样。。。

background: #fff;
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;

当然，我们也可以把百分比换成固定的宽度，比如这样：

CSS Secrets @复杂的背景图案 - CSS娃娃 - CSS娃娃的博客

background: #58a;
background-image: linear-gradient(90deg, #fff 1px, transparent 0),                  
                  linear-gradient(#fff 1px, transparent 0);
background-size: 30px 30px;

然而这样的格子还是显得有些单调，那好办，多铺上两层，改变一下background-size再看一下效果：

background: #58a;
background-image: linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 0),
                  linear-gradient(rgba(255,255,255,.3) 1px, transparent 0),
                  linear-gradient(90deg, #fff 2px, transparent 0),
                  linear-gradient(#fff 2px, transparent 0);
background-size: 15px 15px, 15px 15px, 60px 60px, 60px 60px;

CSS Secrets @复杂的背景图案 - CSS娃娃 - CSS娃娃的博客

那格子基本上就会画了吧？

---

华丽丽分割一下

下面来看点点。。。
每个圆点都可以通过径向渐变radial-gradient()来生成

background: #655;
background-image: radial-gradient(tan 30%, transparent 0);
background-size: 30px 30px;

CSS Secrets @复杂的背景图案 - CSS娃娃 - CSS娃娃的博客

但是这个波点看上去傻傻的，怎么看都觉得不对劲。没错，因为并没有一行隔一行错开排列。
那既然说到”错开“，只需要在原有的background上铺上一层一模一样的，然后通过background-position来调整位置就OK啦！

background: #655;
background-image: radial-gradient(tan 25%, transparent 0),
                  radial-gradient(tan 25%, transparent 0);
background-size: 30px 30px;
background-position: 0 0, 15px 15px;

CSS Secrets @复杂的背景图案 - CSS娃娃 - CSS娃娃的博客