多個CSS線性漸變爲背景

我想使整個頁面的背景看起來像下面的圖像與CSS，我很難一起使用多個線性漸變。背景必須具有較薄的斜條紋，從上到下的顏色淡化在中間較淡，並在頂部和底部淡化成較暗的顏色。多個CSS線性漸變爲背景

我已經嘗試了一堆東西，我在這裏看起來是迄今爲止最好的，但它不是很正確。這是一個jsfiddle顯示我有什麼。

我可以用條紋，但是從上到下的漸變絕對是關閉的，因爲漸變只顯示在透明條紋上。我認爲這裏需要的是兩個漸變重疊以獲得下面的效果，但也許有更好的方法。

下面是從小提琴的情況下，在未來的聯繫斷碼：

/* Stripes */ 
body { 
    background: linear-gradient(
      -45deg, 
      #5BABCF 25%, 
      transparent 25%, 
      transparent 50%, 
      #5BABCF 50%, 
      #5BABCF 75%, 
      transparent 75%, 
      transparent 
    ); 
    background-size: 6px 6px; 
    height: 100vh; 
    margin: 0; 
    padding: 0; 
} 

/* Color Fade */ 
html { 
    background: repeating-linear-gradient(
      to bottom, 
      #051219, 
      #91B7CA 25%, 
      transparent 50%, 
      #91B7CA 75%, 
      #051219 100% 
    ); 
}

不知道如何去這樣做？

來源

2017-08-08 user2827811

對角線漸變條紋應該有HTTPS的RGBA顏色 – vals

可能重複：//計算器。 com/questions/45489892/two-linear-gradients-layers-on-div – cjl750

謝謝vals，這是我需要的。如果您將其作爲答案，我會將其標記爲最佳答案。 – user2827811

增加透明度的斜條紋的身體

body { 
 
    background: linear-gradient(
 
      -45deg, 
 
      #5BABCF 25%, 
 
      transparent 25%, 
 
      transparent 50%, 
 
      #5BABCF 50%, 
 
      #5BABCF 75%, 
 
      transparent 75%, 
 
      transparent 
 
    ); 
 
    background-size: 6px 6px; 
 
    height: 100vh; 
 
    margin: 0; 
 
    padding: 0; 
 
    opacity: 0.2; 
 
} 
 

 
/* Color Fade */ 
 
html { 
 
    background: repeating-linear-gradient(
 
      to bottom, 
 
      #051219, 
 
      #91B7CA 25%, 
 
      transparent 50%, 
 
      #91B7CA 75%, 
 
      #051219 100% 
 
    ); 
 
}

來源

2017-08-08 05:35:37 Prabhakaran

雖然它看起來像在身體中添加不透明度，但是身體內包含的所有內容都具有相同的不透明度，但這種方法很有效。我認爲使用RGB顏色的vals的評論對我來說是更好的解決方案，因爲它只適用於背景屬性。無論如何，我給了你一個讚不絕口，因爲這仍然是一個很好的答案，謝謝。 – user2827811

是的，我注意到它會淡化人體內的一切。 @vals的答案是最好的。謝謝 – Prabhakaran

多個CSS線性漸變爲背景

回答

相關問題