我有一个 CodePen在这里，我正在尝试将我的 8 位小家伙变成 CSS3。
在第 89 行，我开始处理 mustache 。但这并不完全正确。
它目前正在重复 x 和 y，但它正在制作垂直条纹而不是我想要的圆点效果。如果你取消注释第 98 行 (background-repeat:repeat-x;)，那么你会看到它有正确的模式，但它不会垂直重复(很明显)(我想div 可以是任何高度，这仍然有效，你知道吗？)。我希望该模式在两个方向上都能正确重复。当它打开 repeat 或 repeat-y 时，它似乎重叠或发生了什么。
在 color-stops() 中，我最初使用 transparent 而不是 $face 颜色，但它使整个东西变成红色相反。
要了解我想要实现的目标，请在本网站上引用我的头像。
[edit] 我认为它特别复杂，因为我的图案不是直线方格图案。这是重复的最小模式的特写:
最佳答案
问题是其中一个背景完全覆盖了另一个。其他人根本就看不见。我会尝试弄清楚我会怎么做。
更新 所以.. 这不是那么容易。我认为唯一可行的方法是使用对 Angular 渐变，就像 Lea Verou 在这里所做的那样 - http://lea.verou.me/css3patterns/#checkerboard
问题是，如果你将尺寸缩小太多，它看起来就不会完美 - 这是我这样做的一个 tinkerbin - http://tinkerbin.com/MQaHKuJI
关于css - 需要帮助理解 css3 渐变和背景重复，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11400785/