css 渐变 1 颜色填充 40px 和另一个填充 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>

css 渐变 1 颜色填充 40px 和另一个填充 calc(100%-40px)

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

css

gradient