为什么添加多个渐变不起作用？

Question

我想要一个简单的径向渐变，下面有一个较暗的线性色调......

 div {

   width: 1000px;
   height: 500px;
   background: radial-gradient(yellow, orange), linear-gradient(180deg, red, rgba(0,0,0,0));
 }

但只显示径向渐变，而不是第二个。我做错了什么？

Answer 1

径向渐变放置在线性渐变上。由于两种颜色的不透明度均为100％，因此上面的渐变会阻挡下方的渐变。

只需切换渐变的顺序。

 div {
   width: 1000px;
   height: 500px;
   background: linear-gradient(180deg, red, rgba(0,0,0,0)), radial-gradient(yellow, orange);
 }

<div></div>