不同 div 高度的固定渐变

【问题标题】：fixed gradient for different div heights不同 div 高度的固定渐变
【发布时间】：2021-06-23 20:42:26
【问题描述】：

我正在寻找解决问题的方法。我正在构建用于练习的应用程序，它显示了我在一周内每天进行了多少编码。我希望每个条都具有“静态”渐变，并且不会针对不同的高度均匀分布。 that's how it's now 和 that's how i want it to be。提前致谢！

【问题讨论】：

标签： css gradient

【解决方案1】：

您可以混合使用像素和百分比来实现此目的：

div{
  background-image: -webkit-linear-gradient(bottom, #f00 50px, #444 150px, #3465a4 250px, #204a87 100%);
 width:50px;
 display: inline-block;
}

.one{
  height: 150px;
}

.two{
  height: 250px;
}

.three{
  height: 100px;
}

<div class="one"></div>
<div class="two"></div>
<div class="three"></div>

【讨论】：