需要幫助瞭解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漸變和背景重複

回答

相關問題