CSS渐变棋盘格图案

我想使用渐变创建棋盘格图案。我找到了一个示例，并根据自己的需要对其进行了修改，但是它只适用于

-moz

前缀。当我删除

-moz

前缀时，模式完全不同

如何使此

-moz

棋盘格图案与未固定的

线性渐变

配合使用

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

---

只需像下面的代码片段那样修改

背景位置

，即可获得所需的输出。这在Firefox、Chrome、Opera、IE11和Edge中运行良好

正文{
背景图像：线性梯度（45度，#808025%，透明25%）、线性梯度（-45度，#808025%，透明25%）、线性梯度（45度，透明75%，#808075%）、线性梯度（-45度，透明75%，#808075%）；
背景尺寸：20px 20px；
背景位置：0 0，0 10px，10px-10px，-10px-0px；
}

45度版本运行良好，但最终可能会在不同的缩放级别或视网膜屏幕上显示三角形之间的直线。根据需要支持的浏览器，您还可以使用

背景混合模式：difference

（除IE外，当前几乎所有地方都显示支持），您可以使用其他背景图像对检查进行着色：

正文{
背景图像：/*色调图像*/
线性梯度（向右，rgba（192，192，192，0.75），rgba（192，192，192，0.75）），
/*棋盘格效应*/
线性渐变（向右，黑色50%，白色50%），
线性梯度（至底部，黑色50%，白色50%）；
背景混合模式：正常、差异、正常；
背景尺寸：2米2米；
}

这是Chrome的一个实现，当你打开一个透明的图像一段时间后（尽管他们后来删除了它，只使用了一个坚实的背景）

正文{
背景位置：0px 0px，10px 10px；
背景尺寸：20px 20px；
背景图像：线性梯度（45度，eee 25%，透明25%，透明75%，eee 75%，eee 100%），线性梯度（45度，eee 25%，白色25%，白色75%，eee 75%，eee 100%）；
}

感谢Harry的灵感-这里有一个scss混音器来实现这一点

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

---

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

html{
背景：重复圆锥梯度（#8080 0%25%，透明0%50%）
50%/20px 20px
}

使用Autoprefixer（带npm、gulp、grunt，通过Prepos 4，真的可以使用任何工具），前缀永远不会有任何问题。或者caniuse.com是此类内容的参考（搜索“梯度”，然后单击“查看所有（版本）”按钮）相关：很酷的制作方法。IE和不支持浏览器有退路吗？@Lorenzo根据Ana写的判断，我猜退路只是像所有其他答案一样使用多个CSS渐变。@TylerH好的，谢谢you@mix3d当我第一次看到这一变化时，我的笔记本电脑的亮度显然太暗了，无法显示背景效果，所以它看起来并不是“它会是什么样子”。现在我在桌面显示器上，我看到了轻微的棋盘格效果；向后滚。