图片源自 Freepik
写在前面
我们知道，无论是 Adobe 还是其他图形编辑器，都会使用灰白相间的网格背景来表达透明。比如这样：
用 CSS 如何实现呢？
- 使用
background-image+background-size+background-repeat组合，如果想要图片不失真，可使用四个网格 SVG 图片重复。 - 如果不想用图片的话，可以使用
background-image+linear-gradient，设置多个linear-gradient然后进行一定的错位，使其形成格子状。
第一种方式缺点是不便调整大小、颜色。下文就第二种方式展开介绍。
实现
提前知道：
-
background-image可以设置一张或多张图片，前面的图片会挡住后面的图片。 -
background-position可以指定一张或多张图片的位置，background-size等同理。
先定义一个渐变：
.grid {
background-image: linear-gradient(45deg, red 25%, green 25%, green 75%, red 75%);
background-repeat: no-repeat;
background-size: 50px 50px;
}
为什么是 45°、25%、75%？
为了让绿色部分占格子宽度一半。就是一个格子分成了三部分红色、绿色、红色，它们所占比例分别是 1:2:1。当旋转 45° 之后，在对角线看也是这个比例，也是为了后面的堆叠。
接着，再定义多一个相同的渐变，并移动第二个渐变的位置，移动距离为背景图片大小的一半。
.grid {
background-image: linear-gradient(
45deg,
rgba(255, 0, 0, 0.5) 25%,
rgba(0, 255, 0, 0.5) 25%,
rgba(0, 255, 0, 0.5) 75%,
rgba(255, 0, 0, 0.5) 75%
),
linear-gradient(
45deg,
rgba(255, 0, 0, 0.5) 25%,
rgba(0, 255, 0, 0.5) 25%,
rgba(0, 255, 0, 0.5) 75%,
rgba(255, 0, 0, 0.5) 75%
);
background-repeat: no-repeat;
background-position: 0 0, 25px 25px;
background-size: 50px 50px;
}
为方便查看堆叠效果，添加了透明度。
到这里，是不是可以想象得到正方形格子的形状了，接着我们改成 background-repeat: repeat 再看看 👇
观察上图，只要把绿色部分改成透明，红色部分改成灰色，就是灰白相间的网格效果。但改成透明的话，如果本身底部是含有背景的，显示就有问题了，因此背景颜色要改成白色。
.grid {
background-color: #fff;
background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%),
linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%);
background-position: 0 0, 25px 25px;
background-size: 50px 50px;
}
如格子大小、颜色可按需调整。其中白色格子调整
background-color、灰色格子调整background-image中的#eee颜色值。目前每个格子大小是25px，如调整大小，需同时修改background-position，它始终是background-size的一半。
另外，MDN 提供了另外一种做法（Checkerboard），可是兼容性一般。
The end.
