是否可以在固定高度比例上创建基于 CSS 的渐变？

Question

我有一个 div 以编程方式调整大小并位于包装 div 内。我希望（内部）div 的背景颜色为渐变，但渐变基于包装 div 的高度。

例如，渐变可能类似于background: linear-gradient(0deg, green 0%, green 50%, yellow 80%, orange 90%, red 100%)

当内部 div 小于包装 div 高度的 50% 时，我希望它是完全绿色的，但如果达到 70%，它会在顶部开始变黄，在 80% 时顶部开始变为橙色，如果达到 100%，它将具有完整的渐变。请参阅下面的代码笔，了解我在颜色方面的含义。

内部 div 将每 10 秒左右调整一次大小，看起来类似于音频峰值表。

这可以通过纯 CSS 实现，还是我需要使用 javascript？如果我使用 javascript，拥有一堆 css 类并根据百分比切换它们会更高效吗？还是直接着色？

我可以使用多个块来实现这一点，例如 https://codepen.io/octod/pen/vPQLVo（不是我的），但理想情况下，我希望它是一个具有平滑渐变的连续颜色块。

我也可以通过保持内部 div 的全高并调整覆盖 div 的大小来实现它，但不幸的是我有一个透明背景，所以这并不理想。

编辑：根据要求，这是我目前无法使用的（当内部 div 不是全高时，它会显示完整的渐变）。我已经对其进行了简化，并将 css 内嵌在这篇文章中。

真正的 sn-p：（由 Mister Jojos 编辑 - 这不代表我的代码，但接受的答案是基于这个版本的，所以我就这样留下了它）

.outer {
  display: inline-block;
  height: 400px;
  width: 40px;
  background-color: dimgrey;
  padding: 5px;
  margin: 1em;
  }
.outer > div {
  width: 100%;
  }
  #inner50 {
  height: 50%;
  background: linear-gradient(0deg, green 0%, green 50%, yellow 80%, orange 90%, red 100%);
  }
#inner70 {        /* please set the gradient values */
  height: 70%;
  background: linear-gradient(0deg, green 0%, green 50%, yellow 80%, orange 90%, red 100%);
  }
#inner100 {       /* please set the gradient values */
  height: 100%;
  background: linear-gradient(0deg, green 0%, green 50%, yellow 80%, orange 90%, red 100%);
  }

 
 <!-- result in case 50% --> 
 <div class="outer">  <div id="inner50"></div> </div>

 <!-- result in case 70% --> 
<div class="outer">  <div id="inner70"></div> </div>

 <!-- result in case 100% --> 
<div class="outer">  <div id="inner100"></div> </div>

Javascript sn-p:

// this function is called every 1/10th of a second
function updateMeter(newHeight) {
    getElementById("inner").style.height = newHeight+'px';
}

Answer 1

只需将渐变的大小固定为外层div的大小即可：

.outer {
  display: inline-block;
  height: 400px;
  width: 40px;
  background-color: dimgrey;
  padding: 5px;
  margin: 1em;
}

.outer>div {
  width: 100%;
  background: 
    linear-gradient(0deg, green 0%, green 50%, yellow 80%, orange 90%, red 100%) 
      top/ /* place it on the top */
      100% 400px; /* width=100% height=400px */
}

#inner50 {
  height: 50%;
}

#inner70 {
  height: 70%;
}

#inner100 {
  height: 100%;
}

<!-- result in case 50% -->
<div class="outer">
  <div id="inner50"></div>
</div>

<!-- result in case 70% -->
<div class="outer">
  <div id="inner70"></div>
</div>

<!-- result in case 100% -->
<div class="outer">
  <div id="inner100"></div>
</div>

也像下面这样：

.outer {
  display: inline-flex;
  height: 400px;
  width: 40px;
  background-color: dimgrey;
  padding: 5px;
  margin: 1em;
}

.outer>div {
  width: 100%;
  margin-top:auto;
  background: 
    linear-gradient(0deg, green 0%, green 50%, yellow 80%, orange 90%, red 100%) 
      bottom/ /* place it on the top */
      100% 400px; /* width=100% height=400px */
}

#inner50 {
  height: 50%;
}

#inner70 {
  height: 70%;
}

#inner100 {
  height: 100%;
}

<!-- result in case 50% -->
<div class="outer">
  <div id="inner50"></div>
</div>

<!-- result in case 70% -->
<div class="outer">
  <div id="inner70"></div>
</div>

<!-- result in case 100% -->
<div class="outer">
  <div id="inner100"></div>
</div>