需要帮助了解css3渐变和背景重复

Question

我在这里有一个CodePen我想把我的8位小伙伴变成CSS3。

在第89行，我开始研究胡须。但这不太对。

它目前正在重复x和y，但它正在制作垂直条纹而不是我想要的波尔卡圆点效果。如果你取消注释第98行（background-repeat:repeat-x;），那么你会看到它有正确的模式，但它不会垂直重复（显然）（我希望div为任何高度，这仍然是工作，你知道吗？）。我希望这个模式在两个方向上都能正确重复。当重复或重复打开时，它似乎重叠或者是某种东西。

在color-stops()中，我最初使用的是transparent而不是$face颜色，但它使整个事物变成了红色。

要了解我想要达到的目标，请在此网站上引用我的头像。

[编辑]我觉得它太复杂了，因为我的图案不是一个直的方格图案。这是重复的最小模式的特写：

Answer 1

问题是其中一个背景完全覆盖了另一个。其他人根本就没有被人看见。我会试着弄清楚我是怎么做的。

<强>更新 所以..这并不容易。我想象的唯一方法是使用Lea Verou在这里做的对角渐变 - http://lea.verou.me/css3patterns/#checkerboard

问题是，如果你缩小尺寸太多，它看起来就不会很完美 - 这是一个让我这么做的小叮当 - http://tinkerbin.com/MQaHKuJI