渐变棋盘样式

我想创建一个棋盘模式使用渐变。我发现了一个例子，并修改了我的需要，但它只与 -moz前缀。当我删除 -moz前缀时，模式完全不同。comparison of patterns : normal vs. -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;
}
46187 次浏览
小开
最佳答案

只需像下面的代码片段那样修改 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-线性-梯度的输出:

enter image description here

线性梯度输出:

enter image description here

小开

45度的版本工作得很好，但最终可以显示在不同变焦水平或视网膜屏幕上的三角形之间的线。根据你需要支持的浏览器的不同，你也可以使用 background-blend-mode: difference(卡尼斯目前显示除 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;
}

小开

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

小开

谢谢哈里的灵感-这里有一个 sss 混合做到这一点

@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 {
background:
repeating-conic-gradient(#808080 0% 25%, transparent 0% 50%)
50% / 20px 20px
}

我写了一个 对 CSS 技巧的详细说明的工作原理。


提交答案