使用CSS漸變生成網格線

我正嘗試在非常高的列上生成交替實線和虛線的網格。值得注意的是，實線需要以編程的方式分開，並且這樣做時，它們應該顯示更多的虛線。這裏是我的代碼至今：使用CSS漸變生成網格線

CSS：

.test { 
    width: 100%; 
    height: 2000px; 
    background: 
     linear-gradient(white 24px, transparent 24px) 0px -24px, 
     linear-gradient(black 24px, transparent 24px), 
     linear-gradient(90deg, white 1px, red 1px, red 2px, white 2px); 
    background-size: 1px 25px, 1px 50px, 3px 1px; 
}

HTML：

<div class="test"> 
    &nbsp; 
</div>

我覺得我很接近。您可以將第二個背景大小（1px 50px）調整爲1px 75px，以將黑色線分開並顯示兩條虛線。雖然這段代碼有兩件事情不太正確。首先，行高實際上是31px，這是令人驚訝的，因爲我認爲我指定了25px高的漸變。我敢肯定，我可以將這些數字縮小到25px，但我想知道它爲什麼會高於預期。其次，有時25px的增量似乎可以工作，直到你滾動得非常低，然後就會中斷。這裏需要的高度，以達到預期的效果：

的實線之間的虛線數 - >相應的背景大小

0 - > 1px的25像素

1 - > 1px的50像素

2 - > 1px的960x75像素

3 - > 1px的99px

4 - > 1px的124px

5 - > 1px的149px

6 - > 1px的174px

7 - > 1px的199px

爲什麼在100像素的代碼休息，我已經放棄它到99px？我當然可以編碼，但我真的只想知道發生了什麼。謝謝！

來源

2013-08-26 Mike R

你的jsFiddle產生一個空白的結果 – Vector

我沒有得到一個空白的結果，但它實際上崩潰了我的瀏覽器。 – andi

我認爲你可以更有效地使用背景圖像（可能是數據圖像） – andi

Doh !!對不起大家！！此代碼實際上按預期工作。我的縮放級別在該選項卡和該選項卡上無意中設置爲110％，所以我沒有注意到。（>。<）這使得它高於25px，而不是在100px下工作。我很尷尬，就是這樣，爲浪費你的時間而道歉。希望你學到了一些關於堆疊線性漸變的知識。再次感謝您的迴應。

來源

2013-08-26 20:22:08

使用CSS漸變生成網格線

回答

相關問題