css - 方形图案作为 div 的背景(使用纯 CSS)

Question

我正在尝试找到如何构建此模式，使用平行正方形(每个正方形约 3px)作为背景放在 div 上使用 css(不使用图像背景并重复 X 轴)。只能找棋谱，事实并非如此。谁能帮我应对这个挑战？真的非常感谢!

我确实在谷歌上搜索了几个小时如何在这里制作这个图案:

Answer 1

虽然使用重复图像更容易制作您的具体示例，more interesting effects可以使用纯 CSS 实现，因此拥有它并不是一项无用的技能。一如既往地尝试学习与网络相关的东西时，MDN 是一个很好的起点并且有 a pretty good article关于 CSS 渐变。这是它的简短内容。

CSS 渐变是返回图像的函数。最简单的是 linear-gradient。在您的脑海中想象一条水平线，并沿着这条线放置一系列点，您将为其指定一种颜色。该函数会自动使这些点之间的颜色过渡平滑。

body {
  background-image: linear-gradient(to right, black 0%, black 50%, green 75%, yellow 100%);
}

如您所见，渐变从左边是纯黑色，直到我们到达中间 (50%)，然后它开始渐变为绿色，最后渐变为黄色。这种现代而冗长的语法非常直观。我们实际上可以删除其中的一些以获得相同的效果。

body {
  background-image: linear-gradient(to right, black 50%, green 75%, yellow);
}

这一次，我们摆脱了black 0%停止。如果我们没有在 0% 处设置止损，则只使用第一个止损的颜色来填充空白区域。我们也没有指定最后一个停靠点(黄色)的位置，所以它被自动放置在 100%。

当我们在同一点设置两个连续的色标时，我们会得到有趣的结果:

body {
  background-image: linear-gradient(
    to right,
    black, black 50%,
    green 50%, green 75%,
    yellow 75%, yellow
  );
}

这里我们告诉渐变函数从开始到 50% 为黑色，然后从 50% 到 75% 为绿色，然后从 75% 到最后为黄色。通过在色标之间不留空间，我们滥用渐变来产生纯色。当然，我们不需要第一个黑色和最后一个黄色。

我还没有提到的是，生成的渐变实际上并不是整个元素的大小，它实际上像任何背景图像一样平铺在整个元素上。如果我们改变渐变的 Angular ，它会变得非常明显。

body {
  background-image: linear-gradient(
    45deg, black 50%, green 50%, green 75%, yellow 75%
  );
  background-size: 100% 40px;
}

如您所见，渐变现在呈 45 度 Angular ，因此它呈三 Angular 形，但它只有 40 像素高且平铺，这形成了一个有趣的锯齿形。

由于梯度函数生成图像，我们实际上可以平铺所述图像以创建重复图案。我更喜欢在制作渐变时使用百分比，然后使用 background-size 指定渐变的总大小，如下所示:

body {
  background-image: linear-gradient(to right, #617ca2 50%, #28487d 50%);
  background-size: 10px 10px;
}

这会创建一个渐变，即从 0 到 50% 的#617ca2，然后是从 50 到 100% 的#28487d，并将 100% 视为 10px。

最后一个技巧是我们可以有多层背景并在我们的渐变中使用透明颜色。

body {
  background-image: linear-gradient(to bottom, transparent 50%, #28487d 50%),
                    linear-gradient(to right, #617ca2 50%, #28487d 50%);
  background-size: 10px 10px, 10px 10px;
}

您也可以直接使用 repeating-linear-gradient，但您必须以像素为单位设置渐变，并且在涉及第一个和最后一个色标时要更明确一些。我对这种方法不太熟悉，结果可能会略有不同。

body {
  background-image: repeating-linear-gradient(to bottom, transparent, transparent 5px, #28487d 5px, #28487d 10px),
                    repeating-linear-gradient(to right, #617ca2, #617ca2 5px, #28487d 5px, #28487d 10px);
}