css gradient 1 color fill 40px and another fill calc(100%-40px)

Question

我正在做一个元素。在那个元素中，我需要一个 div 的渐变背景。我只需要一种颜色来填充 40px。另一种颜色填充计算(100%-40px)。我从来没有这么深入地玩过渐变。我的 40px 颜色是 rgba(51,51,51,0.44)，100%-40px 颜色是 rgba(51,51,51,0.3)。

这里我创建了一个图像


这可能吗？如果没有任何其他解决方案？

Answer 1

当然，你只要设置第一种颜色在 40px 后停止，然后第二种颜色从同一点开始，一直持续到结束。

格式:

linear-gradient(to bottom, grey, grey 40px, red 40px, red);
linear-gradient([direction], [first color], [first color] [color-stop point], [second color] [second color start point], [optional]);

div {
  display: inline-block;
  width: 50px;
  height: 150px;
  background-image: linear-gradient(to bottom, grey, grey 40px, red 40px);
}
.short {
  height: 70px;
}

<div></div>

<div class="short"></div>