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

我有一个CodePen在这里，我试图让我的小8位伙计进入CSS3。需要帮助了解css3渐变和背景重复

在线89上，我开始研究胡子。但这并不完全正确。

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

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

要知道我想达到什么，请参考我在此网站上的头像。

我觉得这很复杂，因为我的图案不是直的方格图案。下面是重复的最小图案的特写：

enter image description here

来源

2012-07-09 CWSpear

你有没有想过它？ – banzomaikaka 2012-07-12 21:51:02

不是。这就是我最终做的，但它并不理想：http://codepen.io/CWSpear/pen/8-bit/5。但它确实有效。您可以将'$ size'更改为120的倍数，并且可以很好地进行缩放。 – CWSpear 2012-07-13 17:31:56

看起来不错。我问，因为我认为我找到了解决方案。原来我没有。尽管如此，我仍会继续思考。 – banzomaikaka 2012-07-13 18:36:08

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

更新所以......并不那么容易。我认为唯一可行的方法是使用Lea Verou在此处所做的对角线梯度 - http://lea.verou.me/css3patterns/#checkerboard

问题是，如果您将尺寸缩小得太多，它看起来不太完美 - 这里有一个修补程序与我一起做所以 - http://tinkerbin.com/MQaHKuJI

来源

2012-07-09 18:58:28 banzomaikaka

是的，我认为它重复每1个像素，但我希望它重复每4个像素。即使我在我的渐变（和4个背景位置）中有4个“行”，那也不行（我试过）。 – CWSpear 2012-07-09 19:05:17

我试图使它工作，但它很难，因为它不是一个直接检查模式。 – CWSpear 2012-07-09 19:26:41

我发现比梯度更好的方法：http://codepen.io/blazeeboy/pen/bCaLE。但我标记你是正确的，因为你帮助我更好地理解它等等。 – CWSpear 2012-10-03 18:17:57

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

回答

相关问题