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;
}

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输出：

线性渐变输出：

Answer 2

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;
}

Answer 3

这是 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%);
}

Answer 4

感谢 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;
}

Answer 5

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

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

我写了一个 detailed explanation on CSS Tricks 来说明它是如何工作的。

CSS渐变棋盘格图案

CSS gradient checkerboard pattern

css

gradient

linear-gradients