使用多个 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));

我最初的想法是有两个divs，外层是透明的，内层是彩虹的，但透明度被吞没了。然后我想到外部元素上的background 不是使这项工作有效的原因。必须是 filter 才能使该模式起作用。

所以要么我需要弄清楚如何使filter 使用渐变（可能是我可以拉伸的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>

Answer 2

Check this Out

当您可以将 gradient generator 用于 css 背景时，复杂性会降低。方便且易于使用。有些事情最好不要偷懒。

彩虹{

background: red; /* not working, let's see some red */
background: -moz-linear-gradient( top ,
    rgba(255, 0, 0, 1) 0%,
    rgba(255, 255, 0, 1) 15%,
    rgba(0, 255, 0, 1) 30%,
    rgba(0, 255, 255, 1) 50%,
    rgba(0, 0, 255, 1) 65%,
    rgba(255, 0, 255, 1) 80%,
    rgba(255, 0, 0, 1) 100%);
background: -webkit-gradient(linear,  left top,  left bottom, 
    color-stop(0%, rgba(255, 0, 0, 1)), 
    color-stop(15%, rgba(255, 255, 0, 1)),
    color-stop(30%, rgba(0, 255, 0, 1)),
    color-stop(50%, rgba(0, 255, 255, 1)),
    color-stop(65%, rgba(0, 0, 255, 1)),
    color-stop(80%, rgba(255, 0, 255, 1)),
    color-stop(100%, rgba(255, 0, 0, 1)));
}