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线性渐变和标准渐变处理角度的方式不同. -45deg在-moz线性梯度似乎是等于135deg在标准梯度(但改变角度是导致在中间奇怪点).

以下屏幕截图显示了差异(均采用最新的Firefox v44.0).

使用-moz-linear-gradient输出:

线性渐变输出:

Answer 2

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

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

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

Answer 3

45deg版本可以很好地工作,但最终可以在不同缩放级别或视网膜屏幕上显示三角形之间的线条.根据您需要支持的浏览器,您也可以使用background-blend-mode: difference(caniuse目前显示近90%的支持),您可以使用其他背景图像对检查进行着色:

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

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