CSS渐变棋盘图案

Question

我想使用渐变创建棋盘图案。我找到了一个示例并根据我的需要对其进行了修改，但是它仅适用于 -moz 前缀。当我删除 -moz 前缀时，模式完全不同。

我怎样才能使这个 -moz 棋盘模式与无前缀 linear-gradient 一起工作？

 body {
  background-image:
  linear-gradient(45deg, #808080 25%, transparent 25%),
  linear-gradient(-45deg, #808080 25%, transparent 25%),
  linear-gradient(45deg, transparent 75%, #808080 75%),
  linear-gradient(-45deg, transparent 75%, #808080 75%);

  background-size:20px 20px;
  background-position:0 0, 10px 0, 10px -10px, 0px 10px;
}

原文由 Maciej Krawczyk 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

只需修改 background-position 就像下面的代码片段一样，以获得所需的输出。这在 Firefox、Chrome、Opera、IE11 和 Edge 中运行良好。

 body {
  background-image: linear-gradient(45deg, #808080 25%, transparent 25%), linear-gradient(-45deg, #808080 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #808080 75%), linear-gradient(-45deg, transparent 75%, #808080 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

问题似乎正在发生，因为 -moz 线性渐变和标准渐变处理角度的方式不同。 -45deg 在 -moz 线性渐变似乎等于 135deg 在标准渐变中（ _但改变角度会导致中间出现一个奇怪的点_）。

下面的屏幕截图显示了差异（均在最新的 Firefox v44.0 中拍摄）。

使用 -moz-linear-gradient 输出：

线性梯度输出：

原文由 Harry 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

现在是 2020 年，现在可以使用单个 CSS 渐变创建（如果您不需要支持 IE/pre-Chromium Edge）。

 html {
  background:
    repeating-conic-gradient(#808080 0% 25%, transparent 0% 50%)
      50% / 20px 20px
}

我写了一篇 关于 CSS Tricks 的详细解释，说明它 是如何工作的。

原文由 Ana 发布，翻译遵循 CC BY-SA 4.0 许可协议