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。

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

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

使用-moz-linear-gradient输出

使用线性渐变输出：

Answer 2

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 3

这是Chrome的实现，当您打开一幅具有透明性的图像时（尽管后来他们为了使用纯色背景而将其删除了）。

element {
    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

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

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

detailed explanation。

Answer 5

感谢哈里的灵感-这是一个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;
}