CSS 渐变棋盘格图案
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35361986/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS gradient checkerboard pattern
提问by Maciej Krawczyk
I want to create a checkerboard pattern using gradients. I've found an example and modified it to my needs, however it only works with -mozprefix. When I remove the -mozprefix, the pattern is completely different. 
我想使用渐变创建棋盘图案。我找到了一个例子并根据我的需要修改了它，但是它只适用于-moz前缀。当我删除-moz前缀时，模式完全不同。
How can I make this -mozcheckerboard pattern work with unprefixed linear-gradient?
我怎样才能使这个-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;
}
回答by Harry
Just modify the background-positionlike in the below snippet to get the required output. This works fine in Firefox, Chrome, Opera, IE11 and Edge.
只需修改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;
}The problem seems to be happening because of a difference in the way the angles are handled by the -mozlinear gradient and the standard one. -45degin the -mozlinear gradient seems to be equal to 135degin the standard gradient (but changing the angle is resulting in a strange dot in the middle).
由于-moz线性渐变和标准渐变处理角度的方式不同，问题似乎正在发生。 -45deg在-moz线性梯度似乎是等于135deg在标准梯度（但改变角度是导致在中间奇怪点）。
The below screenshots show the difference (both taken in the latest Firefox v44.0).
下面的屏幕截图显示了差异（均在最新的 Firefox v44.0 中拍摄）。
Output with -moz-linear-gradient:
使用 -moz-linear-gradient 输出：
Output with linear gradient:
线性梯度输出：
回答by pmccloghrylaing
The 45deg version works nicely, but can end up showing a line between the triangles at different zoom levels or on retina screens. Depending on what browsers you need to support you can also use background-blend-mode: difference(caniusecurrently shows nearly 90% support), you can tint the checks using an additional background image:
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;
}回答by Grant Gryczan
This was Chrome's implementation for when you opened an image with transparency for a while (though they later removed it in favor of just using a solid background).
这是 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%);
}
回答by Stephen
Thanks Harry for the inspiration - here's an scss mixin to do that
感谢 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;
}
