CSS 透明网格背景

[toFrankie]

写在前面

我们知道，无论是 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.