css - 堆叠多个 CSS 渐变

Question

我发现了类似的问题，但似乎没有任何问题可以回答我的问题(如果可能的话)。

我正在尝试从这个开始堆叠多个渐变(向右):

background: linear-gradient(to right, #3467a6, #c0d8dc 20%, #f3fbe6 50%, #c0d8dc 80%, #3467a6)

这是一个工作堆栈片段

.content-background {
  width: 100%;
  height: 400px;
	background: linear-gradient(to right, #3467a6, #c0d8dc 20%, #f3fbe6 50%, #c0d8dc 80%, #3467a6), 
  
  linear-gradient(to bottom, #3467a6 50%, #481f42);
				
}

<div class="content-background"></div>

现在，我要做的是还创建一个“到底部”的附加渐变，以便在您向下滚动页面时蓝色慢慢变成栗色。

这可以做到吗？

你可以在这里找到我的 fiddle :https://jsfiddle.net/spaceout/se2a97du/12/

Answer 1

双线性渐变背景

在 zzzzBov 发表评论后，我尝试将两个 linear-gradients 添加到 background-image。< br/> 具有 rgba(红绿蓝 alpha)颜色的线性渐变，因此我们可以将 Alpha 设置为部分透明。

.example {
  display: inline-block;
  width: 100px;
  height: 100px;
}

.first {
  background-image: linear-gradient(0deg, rgba(255, 0, 0, 0.2), rgba(0, 200, 0, 0.2));
}

.second {
  background-image: linear-gradient(90deg, rgba(0, 255, 255, 0.5), rgba(100, 50, 100, 0.5));
}

.doubletrance {
  background-image: linear-gradient(0deg, rgba(255, 0, 0, 0.2), rgba(0, 200, 0, 0.2)), linear-gradient(90deg, rgba(0, 255, 255, 0.5), rgba(100, 50, 100, 0.5));
  */
}

<div class="example first"></div>
<div class="example second"></div>
<div class="example doubletrance"></div>