不同 div 高度的固定渐变

Question

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

Answer 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>

不同 div 高度的固定渐变

fixed gradient for different div heights

css

gradient