使用多个CSS渐变

我想创建一个彩虹效果，淡出使用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

，该模式才能工作

因此，要么我需要弄清楚如何使

过滤器

使用渐变（可能是我可以拉伸的SVG？），要么我需要使用一个

，其

背景

以某种方式考虑了两个线性渐变。我更喜欢后者，因为它简单得多

这两种可能吗

更新 看着它让我觉得我应该能够做到：

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{
高度：200px；
背景：线性梯度（右侧，rgba（1,1,1,1），rgba（1,1,1,0）），线性梯度（底部，红色，橙色，黄色，绿色，蓝色，紫色）；
}

当您可以使用css背景时，只需减少复杂性。方便易用。有些事情最好不要做

彩虹{

.rainbow{
高度：200px；
背景：线性渐变（右侧，rgba（255，255，255，0.7），rgba（1，1，1，0）），线性渐变（底部，红色，橙色，黄色，绿色，蓝色，紫色）；
}

---

可能的重复项…我在使用该方法使透明度正常工作时遇到问题。@ZakariaAcharki我更新了OP，说明了应用链接中的答案时发生的情况。您可以使用

不透明度：0.3

作为元素的透明度，使整个元素透明。我希望它有一个渐变透明度：左侧的不透明逐渐变为右侧的透明。你是在谈论动画吗？不，除非动画只有一帧长并且达到了我想要的效果。运行文章中的代码片段，想象彩虹变为透明而不是变为黑色。你可以关联背景优先级它可以模拟一个不透明的视觉。啊，我的问题是我认为

rgba（）

的前三个参数是介于0和1之间的浮点值，而不是介于0和255之间的值。谢谢！假设背景是白色，这可以工作。为了在任何背景上工作，可能需要涉及一些javascript。不。如果你的背景是洋红色，那么你需要在那里应用洋红色的rgba代码h last opacity设置为您想要的任何颜色。它将在没有JS的情况下为您的渐变提供舒缓的效果。是的，我的意思是，要使它在任何背景下工作，您必须了解父级的背景颜色。对于在屏幕上移动的绝对div，它仍然不起作用，显示它后面的内容——这正是我需要它的但是我已经改变了我的方法，使用了一个1px的div。这允许我使div变成波浪形，而不是直线。

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