你为什么不能用这样的东西创建一个方格背景？
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;
这个想法是在条纹正方形的底部分层交替颜色。它不起作用，但似乎应该这样做。
【问题讨论】：
标签： css
这是方格背景在 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);
}
您可以在我的笔中看到一个工作示例here
【讨论】：
此实现在 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)`};
`;
【讨论】：
在玩了很多游戏并尝试以其他方式做到这一点之后，我真正理解了你想要做什么:-)。你实际上非常接近。你有一个问题：你的两个渐变都有90deg，所以它们互相覆盖。也不需要背景颜色，因为后面的渐变没有任何透明度，它覆盖了一切。
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/
【讨论】：
这是此设计的另一个调整，但有偏差。
请注意，背景大小对于在此模式中保持平滑过渡非常重要。
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;
}
要更改背景颜色，请更改两个重复线性渐变中的第二个十六进制颜色。
希望这对某人有所帮助
【讨论】：
我制作了这个简化版。在 CSS 的根属性中设置颜色和大小。
: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>更新：
此 sn-p 源自 CSS Checkered Background，其中显示了更多选项。
但此后我也学会了一种实现相同效果的新方法，但它使用 SVG（以及 JavaScript 来创建 SVG）SVG Checkered Background。每种方法都有自己的注意事项。
【讨论】：
我在终端中使用 ImageMagick 制作了一个基于 10x10 方块的棋盘图案，如下所示：
magick -size 10x10 xc:"gray(154)" xc:"gray(102)" +append \( +clone -flop \) -append -strip checkerboard.png
看起来像这样：
现在，如果我想要 base64 表示，我可以这样做：
magick -size 10x10 xc:"gray(154)" xc:"gray(102)" +append \( +clone -flop \) -append -strip png:- | base64
这给出了这个：
iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAAAAACo4kLRAAAAH0lEQVQY02OcxQADZ+AsJgYsYKgIsiD8YTJInEShIAA1NwKQeKc4/QAAAABJRU5ErkJggg==
然后我可以像这样将它用于重复背景：
<div style="background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAAAAACo4kLRAAAAH0lEQVQY02OcxQADZ+AsJgYsYKgIsiD8YTJInEShIAA1NwKQeKc4/QAAAABJRU5ErkJggg==)">'
如果我在该背景上放置一个具有渐变透明度的红色<img>，我会得到：
【讨论】：
虽然前面的答案表明这是可能的，但在大多数情况下，使用实际的背景图像可能会更好。
一个 10x10 PNG 检查器图像大约有 80 个字节。
那是 108 个字节的 base64 编码，完整的 CSS 规则是 148 个字节 - 比最短的纯 CSS 解决方案要少。
2x2 PNG 图像不会小很多，但需要额外的 CSS 来进行缩放和渲染。
【讨论】：