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

---

使用 Autoprefixer（使用 npm、gulp、grunt、通过 Prepros 4 或任何工具都可以）就永远不会遇到任何前缀问题。否则，caniuse.com 是此类事情的参考（搜索“gradient”，然后单击“查看所有版本”按钮）。 - FelipeAls

相关网址：https://dev59.com/2zEBtIcB2Jgan1znUIhE - Temani Afif

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 线性渐变和标准线性渐变处理角度方式的差异导致的。在 -moz 线性渐变中，-45deg 等同于标准渐变中的 135deg（但改变角度会导致一个奇怪的点出现在中间）。以下屏幕截图显示了这种差异（均在最新的 Firefox v44.0 中拍摄）。 -moz-linear-gradient 输出结果：

使用线性渐变的输出：

- Harry

Answer 2

现在已经是2020年，如果您不需要支持IE / pre-Chromium Edge，那么可以使用单个CSS渐变来创建此效果。

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

我为这个工作编写了一篇CSS Tricks上详细解释。

- Ana

---

有一个很酷的方法。是否有IE和不支持的浏览器的备选方案？ - Lorenzo

根据Ana所写的内容，我猜测备选方案就是像其他答案一样使用多个CSS渐变。 - TylerH

看起来在Chrome中有点偏差：https://i.imgur.com/qswaMXH.png - mpen

Answer 3

45度版本使用效果不错，但在不同缩放级别或视网膜屏幕上，三角形之间可能会出现一条线。根据需要支持的浏览器，您还可以使用background-blend-mode: difference（Caniuse目前几乎在除IE外的所有浏览器中都有支持），您可以使用额外的背景图像来对勾号进行着色：

body {
    background-image: /* tint image */
                      linear-gradient(to right, rgba(192, 192, 192, 0.75), rgba(192, 192, 192, 0.75)),
                      /* checkered effect */
                      linear-gradient(to right, black 50%, white 50%),
                      linear-gradient(to bottom, black 50%, white 50%);
    background-blend-mode: normal, difference, normal;
    background-size: 2em 2em;
}

- pmccloghrylaing

Answer 4

这是 Chrome 在打开带有透明度的图像时的实现方式（不过后来他们选择了使用纯色背景，将其取消了）。

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

- Grant Gryczan

---

当我第一次看到这个更改时，我的笔记本电脑的亮度显然太暗了，无法显示背景效果，因此它没有出现“应该看起来的样子”。现在我用台式机显示器看到了轻微的棋盘格效果，已经回滚了。 - TylerH

Answer 5

感谢Harry的灵感-这里有一个scss mixin可做到这一点。

@mixin checkers($size: 50px, $contrast: 0.07) {
  $checkerColor: rgba(#000, $contrast);
  $angle: 45deg;
  $tp: 25%;

  background-image: linear-gradient($angle, $checkerColor $tp, transparent $tp),
    linear-gradient(-$angle, $checkerColor $tp, transparent $tp),
    linear-gradient($angle, transparent 3 * $tp, $checkerColor 3 * $tp),
    linear-gradient(-$angle, transparent 3 * $tp, $checkerColor 3 * $tp);
  background-size: $size $size;
  background-position: 0 0, 0 $size/2, $size/2 -1 * $size/2, -1 * $size/2 0;
}

- Stephen