为什么你不能使用类似这样的东西来创建棋盘格背景？
background-color:#ccc;
background-image:linear-gradient(90deg, transparent 50%, #aaa 50%),
linear-gradient(90deg, #aaa 50%, #ccc 50%);
background-size:50px 50px,50px 50px;
background-position:0 0, 0 25px;
这个想法是在条纹正方形底部分层交替颜色。它并不起作用，但似乎应该有用。
这是一个像 Photoshop 或 Illustrator 这样的图形设计编辑器中方格背景的精确复制品。（全部使用 CSS）
.checkered{
height: 240px;
background: -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), white;
background: -moz-linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), -moz-linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), white;
background: linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), white;
background-repeat: repeat, repeat;
background-position: 0px 0, 5px 5px;
-webkit-transform-origin: 0 0 0;
transform-origin: 0 0 0;
-webkit-background-origin: padding-box, padding-box;
background-origin: padding-box, padding-box;
-webkit-background-clip: border-box, border-box;
background-clip: border-box, border-box;
-webkit-background-size: 10px 10px, 10px 10px;
background-size: 10px 10px, 10px 10px;
-webkit-box-shadow: none;
box-shadow: none;
text-shadow: none;
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
transition: none;
-webkit-transform: scaleX(1) scaleY(1) scaleZ(1);
transform: scaleX(1) scaleY(1) scaleZ(1);
}
您可以在我的代码编辑器中查看一个可工作的示例，这里
这个实现在Chrome、Firefox和Safari上产生了棋盘式的背景：
body {
background-image:
linear-gradient(45deg, #000 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #000 75%),
linear-gradient(45deg, transparent 75%, #000 75%),
linear-gradient(45deg, #000 25%, #fff 25%);
background-size:100px 100px;
background-position:0 0, 0 0, -50px -50px, 50px 50px;
}
这个样式定义了一个由四个部分组成的背景图像，每个线性渐变都定义了一个黑色三角形，这些三角形被移动以对齐形成正方形（每个正方形由两个三角形组成），最后一个线性渐变定义了其他两个正方形（负空间）的颜色。第三和第四个三角形的定位使其有效运作（否则它们将被定位在其他两种相似的样式上方）。在提供的示例中查看结果（为了更好的理解，请将＃000替换为四种不同的颜色，并将＃fff更改为透明色）：
应用于div元素:
http://jsfiddle.net/1o0f34hp/1
然而，在Firefox浏览器中三角形之间的边缘似乎有一些撕裂。有关此现象，请参考以下链接：
background image, linear gradient jagged edged result needs to be smooth edged
我还将其实现为一个React样式组件，如下所示：
let dark = '#777';
let light = '#ccc';
export const Checkerboard = styled.div`
background-image: linear-gradient(45deg, ${dark} 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, ${dark} 75%),
linear-gradient(45deg, transparent 75%, ${dark} 75%),
linear-gradient(45deg, ${dark} 25%, ${light} 25%);
background-size: ${props => `${props.size} ${props.size}`};
background-position: 0 0, 0 0,
${props =>
`calc(${props.size} / -2) calc(${props.size} / -2), calc(${
props.size
} / 2) calc(${props.size} / 2)`};
`;
经过多次尝试和其他方法的尝试，我终于理解了你想要做什么 :-). 你实际上非常接近成功。你只有一个问题：你的两个渐变色都是90度，因此它们互相覆盖。此外，由于后面的渐变没有任何透明度并且覆盖了所有内容，所以不需要背景颜色。
html {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
background-image:linear-gradient(0deg, transparent 50%, #aaa 50%),
linear-gradient(90deg, #aaa 50%, #ccc 50%);
background-size:50px 50px,50px 50px;
background-position:0 0, 0 25px;
}另外，查看以下这篇很棒的文章，了解如何创建一个合适的棋盘格样式：http://lea.verou.me/2011/02/checkerboard-pattern-with-css3/
:root {
--checker-color-1: #abcedf;
--checker-color-2: #123456;
--checker-size: 20px;
--checker-gradient: linear-gradient(45deg, var(--checker-color-1) 25%, transparent 25%, transparent 75%, var(--checker-color-1) 75%);
}
body {
background-color: var(--checker-color-2);
background-image: var(--checker-gradient), var(--checker-gradient);
background-position: 0 0, var(--checker-size) var(--checker-size);
background-size: calc(var(--checker-size) * 2) calc(var(--checker-size) * 2);
}<!DOCTYPE html>
<html>
<head>
<title>CSS Checkered Background</title>
<meta charset="utf-8">
</head>
<body>
</body>
</html>更新：
这个代码片段派生自CSS方格背景，其中展示了更多的选项。
但我后来也学到了一种新的实现相同效果的方法，但它使用了SVG（以及JavaScript创建SVG）SVG方格背景。然而每种方法都有其自身的注意事项。
conic-gradient()。这也避免了linear-gradient()在45deg时产生的伪像。
function setVar(name, value) {
document.getElementById('checkered').style.setProperty(name, value);
}.checkered {
--color-1: #808080;
--color-2: #a9a9a9;
--size: 8px;
background-image: conic-gradient(var(--color-1) 25%, var(--color-2) 25%, var(--color-2) 50%, var(--color-1) 50%, var(--color-1) 75%, var(--color-2) 75%);
background-size: calc(var(--size)*2) calc(var(--size)*2);
}
input {
margin: 4px;
height: 32px;
box-sizing: border-box;
border: 2px solid lightgray;
border-radius: 4px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Checkered Background Image (Pure CSS)</title>
</head>
<body style="margin:0; width:100vw; height:100vh;">
<div id="checkered" class="checkered" style="width:100%; height:100%; padding: 20px; box-sizing:border-box; display:flex; align-items:start;">
<div style="background-color:white; padding:8px; border-radius:9px; display:flex;">
<input type="color" name="color-1" value="#808080" oninput="setVar('--color-1', this.value)">
<input type="color" name="color-2" value="#a9a9a9" oninput="setVar('--color-2', this.value)">
<input type="number" name="size" min="1" value="8" oninput="setVar('--size', this.value + 'px')">
</div>
</div>
</body>
</html>这是对这个设计的另一种调整，但是倾斜了一点。
请注意，background-size对于保持这个图案的平滑过渡非常重要。
html {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
background:repeating-linear-gradient(135deg, rgba(0,64,101,0.7) 40%, #004065 60%),
repeating-linear-gradient(45deg, rgba(0,80,126,0.7) 40%, #004065 60%);
background-size:12px 18px;
background-position: 0 0;
}
要改变背景颜色，请修改两个重复线性渐变中的第二个十六进制颜色。
希望这能帮到某些人。
magick -size 10x10 xc:"gray(154)" xc:"gray(102)" +append \( +clone -flop \) -append -strip checkerboard.png
magick -size 10x10 xc:"gray(154)" xc:"gray(102)" +append \( +clone -flop \) -append -strip png:- | base64
That gives this:
iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAAAAACo4kLRAAAAH0lEQVQY02OcxQADZ+AsJgYsYKgIsiD8YTJInEShIAA1NwKQeKc4/QAAAABJRU5ErkJggg==
这只有120个字符！！！
然后我可以像这样将其用于重复背景：
<div style="background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAAAAACo4kLRAAAAH0lEQVQY02OcxQADZ+AsJgYsYKgIsiD8YTJInEShIAA1NwKQeKc4/QAAAABJRU5ErkJggg==)">'
如果我在这个背景上放一个带有渐变透明度的红色<img>，会得到以下效果：
虽然之前的答案表明这是可能的，但在大多数情况下，最好使用实际的背景图像。
一个10x10的PNG检查器图像大约为80字节。
这是108个字节的base64编码，完整的CSS规则需要148个字节 - 小于最短的纯CSS解决方案。
一个2x2的PNG图像不会小得多，但需要额外的CSS进行缩放和渲染。