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-线性梯度的输出：

线性渐变输出：

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

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

Answer 6

“线性渐变棋盘图案”会产生丑陋的伪影

png 棋盘图案

<body style="

/* keep it sharp on zoom */
image-rendering: pixelated;

/* 10px dark checkerboard pattern: black + 75% grey */
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAIAAAACUFjqAAABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AYht+miiIVETuIOGRoneyiUhxrFYpQIdQKrTqYXPoHTRqSFBdHwbXg4M9i1cHFWVcHV0EQ/AFxdnBSdJESv0sKLWK847iH97735e47QGhWmWb1JABNt81MKinm8qti3ysEDNOMIyozy5iTpDR8x9c9Any/i/Es/7o/x6BasBgQEIkTzDBt4g3i+KZtcN4nDrOyrBKfE0+adEHiR64rHr9xLrks8Mywmc3ME4eJxVIXK13MyqZGPEMcUTWd8oWcxyrnLc5atc7a9+QvDBX0lWWu0xpHCotYggQRCuqooAobMdp1Uixk6Dzp4x9z/RK5FHJVwMixgBo0yK4f/A9+99YqTk95SaEk0PviOB9RoG8XaDUc5/vYcVonQPAZuNI7/loTmP0kvdHRIkfA0DZwcd3RlD3gcgcYfTJkU3alIC2hWATez+ib8sDILTCw5vWtfY7TByBLvUrfAAeHwESJstd93t3f3bd/a9r9+wHa1HLQYEoyfQAAAAlwSFlzAAAuIwAALiMBeKU/dgAAACJJREFUGNNjtLa2ZkACR48eReYyMeAFNJVmROOjuXQgnQYA5a0DxDMjGXQAAAAASUVORK5CYII=);

"></body>

CSS渐变棋盘图案

问题描述投票：0回答：6

6个回答

最新问题

CSS渐变棋盘图案

问题描述 投票：0回答：6

6个回答

最新问题

问题描述投票：0回答：6