需要帮助理解 css3 渐变和背景重复答案

【问题标题】：Need help understanding css3 gradients and background-repeat需要帮助理解 css3 渐变和背景重复
【发布时间】：2012-07-09 04:33:31
【问题描述】：

我在这里有一个 CodePen，我正在尝试将我的 8 位小家伙变成 CSS3。

在第 89 行，我开始研究胡须。但这并不完全正确。

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

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

要了解我想要达到的目标，请参考我在本网站上的头像。

[edit] 我认为它更复杂，因为我的图案不是直方格图案。这是重复的最小模式的特写：

【问题讨论】：

你搞清楚了吗？
并非如此。这就是我最终做的事情，但并不理想：codepen.io/CWSpear/pen/8-bit/5。但它确实有效。您可以将$size 更改为 120 的倍数，它可以很好地缩放。
看起来不错。我问是因为我认为我找到了解决方案。结果我没有。不过我还是会继续考虑的。
谢谢，非常感谢。我认为这对于现在的胡须来说已经足够了。总有一天，我会弄清楚这件衬衫。我不在乎它是否不完美，但格子花呢，呵呵。

标签： css sass gradient background-repeat

【解决方案1】：

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

更新所以..这并不容易。我认为可能的唯一方法是像 Lea Verou 在这里所做的那样使用对角渐变 - http://lea.verou.me/css3patterns/#checkerboard

问题是，如果你将尺寸缩小太多，它看起来就不会完美 - 这是我这样做的一个修补匠 - http://tinkerbin.com/MQaHKuJI

【讨论】：

是的，我认为它每 1 像素重复一次，但我希望它每 4 像素重复一次。即使我的渐变中有 4 个“行”（和 4 个背景位置），也不会这样做（我试过）。
我正在努力让它发挥作用，但这很困难，因为它不是直截了当的格子图案。
我找到了比渐变更好的方法：codepen.io/blazeeboy/pen/bCaLE。但是我将您标记为正确，因为您确实帮助我更好地理解它等等。
完全忘记了这一点；）是的，我也遇到过这种技术。箱形阴影使它变得非常容易。那个图像到 css 转换器是非常酷的人！如果它可以使用，我肯定会使用它。干得好！
我发现了这个 - patternify.com - 这很酷，我不知道。使创建这种模式变得非常容易，并且不会带来额外的图像 http 请求。 ptrn.it/SNxX5L -> 你的模式