如何将1个渐变分成几个元素

Question

我有一个页面，其中有n个不同大小和位置的元素。页面的背景颜色是默认的。并且在整个页面上有一个元素，它用渐变填充（例如，从黄色到红色）。如何才能使背景不会改变，只有这些n个元素用渐变填充？

我尝试执行以下操作：我使用“overflow：hidden”选项创建了元素（random-div），并在其中放置了一个在整个屏幕上拉伸的元素（渐变背景）。我期望元素（渐变背景）隐藏超出其大小的所有内容，但这并没有发生。最后，我意识到我正在思考错误的方式并完全混淆。

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