Как сделать 1 градиент на несколько элементов

Question

У меня есть страница, на которой есть n элементов разного размера и положения. Цвет фона страницы по умолчанию. И есть элемент, растянутый по всей странице, он заполнен градиентом (например, от желтого до красного). Как сделать так, чтобы фон не менялся и только эти n элементов были заполнены градиентом?

Я попытался сделать следующее: я создал элемент (random-div) с опцией «overflow: hidden» и поместил в него элемент, растянутый по всему экрану (градиент-фон). Я ожидал, что элемент (градиент-фон) будет скрывать все, что выходит за рамки его размера, но этого не произошло. В конце концов, я понял, что я думал неправильно, и совершенно запутался.

.random-div {
    position: absolute;
    width: /* random */;
    left: /* random */;
    top: /* random */;
    overflow: hidden;
}

.gradient-background {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    background: linear-gradient(50.93deg, #00122D -8.75%, #003366 50.04%, rgba(0, 106, 106, 0.25) 153.06%);
    z-index: -150;
}

Помогите решить эту проблему. Нет необходимости следить за ходом моих мыслей. Важен только результат. Любые методы принимаются.

Answer 1

Использование background-attachment:fixed ^ref

body {
  background:pink;
}

.a,.b {
  width:100px;
  height:100px;
  margin:10px;
  background:linear-gradient(blue,red) fixed;
}

.b {
 margin-left:250px;
}

<div class="a">

</div>
<div class="b">

</div>