css - 我们可以将两个渐变一个放在另一个上吗

Question

以下是我为 div 设置的线性渐变:

div{
background: linear-gradient(112deg,#A0148C , #FF2896 37.1%, #F05A00 81.3%);
}

我们可以在这个上面放置另一个 CSS 渐变(就像在这个渐变上放置另一层)吗？

Answer 1

是的，您可以只在属性中列出背景，用逗号分隔。请记住，“上”渐变需要有一定的透明度才能在下方看到“下”渐变:

div{
background: linear-gradient(rgba(255,0,0,0.2), rgba(0,0,255, 0.5)), linear-gradient(112deg,#A0148C , #FF2896 37.1%, #F05A00 81.3%);
}