CSS渐变棋盘图案答案

【问题标题】：CSS gradient checkerboard patternCSS渐变棋盘图案
【发布时间】：2016-05-23 13:35:36
【问题描述】：

我想使用渐变创建棋盘图案。我找到了一个示例并根据我的需要对其进行了修改，但是它仅适用于 -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;
}

【问题讨论】：

使用 Autoprefixer（使用 npm、gulp、grunt，通过 Prepros 4，任何工具），你永远不会遇到前缀问题。否则 caniuse.com 是这类事情的参考（搜索“渐变”，然后单击“查看所有（版本）”按钮）
相关：stackoverflow.com/q/55455177/8620333

标签： css gradient linear-gradients

【解决方案1】：

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

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

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

【讨论】：

很酷的方法。IE 和不支持的浏览器有后备方案吗？
@Lorenzo 从 Ana 写的内容来看，我猜回退只是像所有其他答案一样使用多个 CSS 渐变。

【解决方案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;
}

【讨论】：

【解决方案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%);
}

【讨论】：

@mix3d 当我第一次看到这个变化时，我的笔记本电脑的亮度显然太暗而无法显示背景效果，所以它没有出现“它看起来如何”。现在我在桌面显示器上，我看到了轻微的方格效果；回滚。

【解决方案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;
}

【讨论】：

【解决方案5】：

只需像下面的 sn-p 那样修改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 输出：

线性渐变输出：

【讨论】：