【CSS】三行实现一个黑白网格背景（渐变）

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

最近还在学习前端，看见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;
}

实现效果如下：