如何使用CSS获得正方形的正方形？

Question

我正在尝试为我的项目创建背景。当我使用下面的css

.srd-demo-canvas {
  background-size: 24px 24px;
  background-image:
    linear-gradient(to right,  rgba(0, 0, 0, 0.15) 1px, transparent 2px),
    linear-gradient(to bottom,  rgba(0, 0, 0, 0.15) 1px, transparent 2px);
}

我获得以下视图：

但是，我希望背景中有一些大方块，其中有一些小方块，如下所示：

我应该在CSS代码中添加或删除什么？

Answer 1

您可以使用4个线性梯度像这样修改它：

body {
  background-size: 72px 72px, 72px 72px, 24px 24px, 24px 24px;
  background-image: linear-gradient(rgba(0, 0, 0, .5) 2px, transparent 2px), linear-gradient(90deg, rgba(0, 0, 0, .5) 2px, transparent 2px), linear-gradient(rgba(0, 0, 0, .25) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, .25) 1px, transparent 1px);
  background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
}