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

Question

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

的高度

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

当内部div小于wrapperdiv高度的50%时，我希望它完全是绿色的，但是如果达到70%，它就会开始变绿在顶部变成黄色，在 80% 时它开始在顶部变成橙色，如果它达到 100% 它将具有完整的渐变。有关我在颜色方面的意思的示例，请参见下面的代码笔。

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

是否可以使用纯 CSS 来实现，还是我需要使用 javascript？如果我使用 javascript，使用一堆 css 类并根据百分比切换它们，或者直接给事物上色会更高效吗？

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

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

编辑：根据要求，这是我目前所拥有的但不起作用（当内部 div 不是全高时它显示完整的渐变）。我已经简化了它并为此 post.

内嵌了 css

真实片段：（由 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 片段：

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

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

Is it possible to create a css based gradient on a fixed height scale?

css

linear-gradients