多个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线性渐变为背景

回答

相关问题