Что я имею в виду под отзывчивым, так это то, что переход градиента фона всегда будет на высоте выбранного прозрачного элемента, поскольку это будет конструктивная особенность, обеспечивающая переход градиента на фоне прозрачного элемента.
Если я просматриваю этот фрагмент кода ручки в инспекторе кода Chrome и эмулирую представление в другом разрешении, переход будет ниже или выше прозрачного элемента.
Как получить переход точно под прозрачнымэлемент на всех разрешениях без изменения типа единицы позиционирования прозрачного элемента?
Я пытался использовать также% для остановки градиента, но он не будет отзывчивым.
Я использовал заголовокв качестве прозрачного элемента для простоты, но на самом деле это строка 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>
( codepen )