css - 使用多个 CSS 渐变

Question

我想创建一个使用 CSS 渐变渐变的彩虹效果。

垂直方向，我想要彩虹效果:

background: linear-gradient(to bottom, red, orange, yellow, green, blue, violet);

横向，我想要淡入淡出的效果:

background: linear-gradient(to right, rgba(1,1,1,1), rgba(1,1,1,0));

我最初的想法是有两个 div s，外面是透明的，里面是彩虹的，只是透明被吞没了。然后我想到background在外部元素上并不是使这项工作起作用的原因。它需要是 filter使该模式起作用。

所以要么我需要弄清楚如何制作 filter使用渐变(可能是我可以拉伸(stretch)的 SVG？)，或者我需要使用单个 <div>谁的background以某种方式考虑了两个线性渐变。我更喜欢后者，因为它更简单。

这两种可能吗？

更新

查看How to add multiple css gradient as a multiple background?让它看起来像我应该能够做到的:

background: linear-gradient(to right, rgba(1,1,1,1), rgba(1,1,1,0)), linear-gradient(to bottom, red, orange, yellow, green, blue, violet);

这让我很接近，但是水平渐变并没有导致垂直渐变变得透明；相反，它导致它从黑色变为完全可见。

.rainbow {
  height: 200px;
  background: linear-gradient(to right, rgba(1,1,1,1), rgba(1,1,1,0)), linear-gradient(to bottom, red, orange, yellow, green, blue, violet);
}

<div class='rainbow'></div>

我还注意到，在第一个梯度中，rgba() 中的前三个值没关系——只有 alpha 才重要。我不知道该怎么做。

Answer 1

.rainbow {
  height: 200px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.7), rgba(1, 1, 1, 0)), linear-gradient(to bottom, red, orange, yellow, green, blue, violet);
}

<div class='rainbow'></div>