在褪色的同时，淡出div的一侧淡出

Question

我想知道是否有一种方法可以使div的一面完全消失（不透明度为0），同时仍然像在Sketch或Illustrator上那样使淡出的颜色渗透。像这样：

底部是黑色，淡出的颜色是粉红色。

如果没有，你能做三种颜色渐变吗？ Javascript解决方案也很好。

Answer 1

检查css线性渐变。见下面的例子：

div {
  background: linear-gradient(to top, rgba(255, 0, 0, 1), rgba(0, 0, 0, 0));

 }

<div style="height: 250px; width: 250px">

</div>

Answer 2

您可以在CSS渐变中使用多种颜色：

＆＃13;

＆＃13;

div {
  width: 200px;
  height: 150px;
  background: linear-gradient(to top, #000, #af7caf, #fff);
}

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;

使用rgba可以更改不透明度：

＆＃13;

＆＃13;

div {
  width: 200px;
  height: 150px;
  background: linear-gradient(to top, rgba(0, 0, 0, 1.0), rgba(175, 124, 175, 0.5), rgba(255, 255, 255, 0));
}

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;