1px寬的對角線條紋與CSS之間的空隙

我嘗試在CSS中做某些事情，但是我失敗了。
這是我走到這一步：1px寬的對角線條紋與CSS之間的空隙

#stripes { 
 
    height:90vh; 
 
    background-image: linear-gradient(-45deg, black 25%, transparent 25%, transparent 50%, black 50%, black 75%, transparent 75%, transparent); 
 
    background-size:4px 4px; 
 
}

<div id="stripes"></div>

正如你所看到的，「黑 - 白 - 比」是永遠不變的。所以你得到了1px的條紋，然後1px的差距，1px的條紋，1px的差距，...

但我想實現的是，有像條紋之間5px的空間。
我試着改變百分比，但是這並不會導致我嘗試做的事情。

我確定這是可能的。有誰知道如何？謝謝你的幫助！

來源

2017-08-15 Tobias Glaus

只是谷歌的'背景圖案css'，有一噸的例子。 –

謝謝@Paulie_D我的眼睛現在正在流血 – j08691

@Paulie_D不，你的codepen字面上和我已經試過的一樣，只是更大。我試圖在兩條線之間取得更大的差距。所以像︰1px條紋，5px間隙，1px條紋，... –

-1

像這樣使用repeating-linear-gradient

#stripes { 
 
    height: 100vh; 
 
    background: repeating-linear-gradient(-45deg, transparent, transparent 5px, /* gap */ 
 
    black 6px, /* overall width incluing gap */ 
 
    black 6px); 
 
} 
 

 
* { 
 
    margin: 0; 
 
    padding: 0; 
 
}

<div id="stripes"></div>

來源

2017-08-15 14:28:44

是的，有點兒。謝謝！將其調整爲「線性漸變（-45度，透明46％，＃000 49％，＃000 51％，透明度55％）」。這正是我需要的:)謝謝你！ –

好的，但用我的，你不需要背景大小， –

是真的。你的看起來不錯。也許會用那個而不是我的 –

1px寬的對角線條紋與CSS之間的空隙

回答

相關問題