css - 如何在不改变其他元素定位单位的情况下实现响应式线性渐变？

Question

我所说的响应式是指背景的渐变过渡将始终处于选定透明元素的高度，因为在透明元素的背景中具有渐变过渡将是一项设计功能。

如果我在 chrome 代码检查器中查看此 codepen 片段并以不同的分辨率模拟视图，则转换将低于或高于透明元素。

如何在不更改透明元素的定位单元类型的情况下，在所有分辨率下准确地在透明元素下获得过渡？

我也尝试将 % 用于渐变停止，但它不会响应。

为了简单起见，我使用标题作为透明元素，但实际上它是一个 flexbox 行，就在网站标题下方和页面内容上方，因此更改该行的定位单位似乎是不可能的。

h1 {
  padding-top: 35px;
  padding-left: 50%;
  font-size: 10vh;
  color: #00000020;
}

div {
  height: 700px;
  background: linear-gradient(to bottom, #f19585, #f19585 20vh, #f9e314 26vh, #f9e314 60vh, #9a080f 61vh, #9a080f);
}

<div>
  <h1>Hello</h1>
</div>

（代码笔）

标签： cssgradientresponsive