写在前面
我们知道,无论是 Adobe 还是其他图形编辑器,都会使用灰白相间的网格背景来表达透明。比如这样:
用 CSS 如何实现呢?
- 使用
background-image
+background-size
+background-repeat
组合,如果想要图片不失真,可使用四个网格 SVG 图片重复。 - 如果不想用图片的话,可以使用
background-image
+linear-gradient
,设置多个linear-gradient
然后进行一定的错位,使其形成格子状。
第一种方式缺点是不便调整大小、颜色。下文就第二种方式展开介绍。
实现
提前知道:
background-image
可以设置一张或多张图片,前面的图片会挡住后面的图片。background-position
可以指定一张或多张图片的位置,background-size
等同理。
先定义一个渐变:
css
.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° 之后,在对角线看也是这个比例,也是为了后面的堆叠。
接着,再定义多一个相同的渐变,并移动第二个渐变的位置,移动距离为背景图片大小的一半。
css
.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
再看看 👇
观察上图,只要把绿色部分改成透明,红色部分改成灰色,就是灰白相间的网格效果。但改成透明的话,如果本身底部是含有背景的,显示就有问题了,因此背景颜色要改成白色。
css
.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.