复杂背景——棋盘

棋盘背景

上图貌似可以在CSS中很容易重现出来，只要创建两个不同背景定位的方块就可以了，但是并非如此，我们没有办法使用渐变创建一个四周有空隙的方块。
解决方式：
我们可以通过两个直角三角形拼接成，首先我们线创建一个直角三角形，并把它的直角边缩小

.div_bg{
    background: #eee;
    background-image: linear-gradient(45deg, #bbb 25%, transparent 0);
    background-size: 30px 30px;
}

效果图：

接下来，我们在创建一个不同背景定位的反向三角形，与其拼接成正方形

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

效果图：

最后，我们只需要创建一组重复渐变，并偏移他们的定位值即可

.div_bg{
    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-size: 30px 30px;
    background-position: 0 0,15px 15px,15px 15px, 30px 30px;
}

到目前为止，我们的棋盘图案已经完成了。

优化

将四层渐变改为两层渐变，并把深灰色改为半透明黑色，这样只需修改background 的颜色值即可改变主色调。

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