双线性渐变背景

Question

我发现了类似的问题，但似乎没有什么能解决我的问题（如果可能的话）。

我试图从这个（右边）开始堆叠多个渐变：

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

这是一个有效的Stack Snippet

＆＃13;

.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);
				
}

＆＃13;

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

＆＃13;

现在，我尝试做的还是创建一个额外的渐变＆＃34;到底部＆＃34;所以当你向下滚动页面时，蓝色慢慢变成栗色。

可以这样做吗？

你可以在这里找到我的小提琴：https://jsfiddle.net/spaceout/se2a97du/12/

Answer 1

双线性渐变背景

在zzzzBov评论之后，我尝试将两个 linear-gradients 添加到 background-image 。具有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>

堆叠多个CSS渐变

1 个答案:

双线性渐变背景