使用 CSS background 构造一个棋盘

[yibuyisheng]

使用的 CSS 代码如下：

    div.demo1 {
        width: 300px;
        height: 150px;

        background-color: #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, 0 0;
    }

整个 div 的背景色是 #eee 。

这个背景是由四幅代码“制造”的图片构成的，分别对应于四行 linear-gradient 。

第一幅图片，颜色渐变，角度是 45deg ，于是从图片的左下角开始往右上角渐变。0-25%的颜色是 #bbb ，25%-100%的颜色是透明的（ transparent ），图片的大小是30px*30px的，图片从坐标(0,0)处开始绘制。

第二幅图片，颜色渐变，角度是 45deg ，于是从图片的左下角开始往右上角渐变。0-75%的颜色是透明的（ transparent ），75%-100%的颜色是 #bbb ，图片的大小是30px*30px的，图片从坐标(15px,15px)处开始绘制。

第三幅图片，颜色渐变，角度是 45deg ，于是从图片的左下角开始往右上角渐变。0-25%的颜色是 #bbb ，25%-100%的颜色是透明的（ transparent ），图片的大小是30px*30px的，图片从坐标(15px,15px)处开始绘制。

第四幅图片，颜色渐变，角度是 45deg ，于是从图片的左下角开始往右上角渐变。0-75%的颜色是透明的（ transparent ），75%-100%的颜色是 #bbb ，图片的大小是30px*30px的，图片从坐标(0,0)处开始绘制。

为了更清晰的看到每幅图片代码对应的区域，参考一下一段代码及其效果：

    div.demo2 {
        width: 300px;
        height: 150px;

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

结语

css 的 background 属性现在很强大了，利用背景“图片”的层叠，可以做出很多绚丽的背景效果。

更多效果。

[luqin]

👍 现在的css真牛掰了

[yibuyisheng]

@uooo 是啊，那些大神用最新的 css 做出了好多的炫酷效果。

[zzz6519003]

css is a domain specific language XD
btw 你们团队还在招人么 想写react

[yibuyisheng]

@zzz6519003 我们团队目前没 headcount ，也不是用 React 的。。。