最近还在学习前端,看见VScode调色板里的背景是这种黑白格,我就试着用CSS复刻一下。
代码就是三行,可以通过调节size
和position
来改变格子大小:
body { background: linear-gradient( 45deg, rgba(0, 0, 0, 0.4) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.4) 75%, rgba(0, 0, 0, 0.4) ), linear-gradient( 45deg, rgba(0, 0, 0, 0.4) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.4) 75%, rgba(0, 0, 0, 0.4) ); background-size: 10px 10px; background-position: 0 0, 5px 5px; } 复制代码
实现效果如下: