如何将1个渐变变成多个元素

Question

我有一个页面，上面有 n 个不同大小和位置的元素。页面的背景颜色是默认的。并且有一个元素横跨整个页面，它填充了渐变（例如，从黄色到红色）。怎样才能让背景不变，只有这n个元素填充渐变？

我尝试执行以下操作：我使用 "overflow: hidden" 选项创建了元素 (random-div)，并在其中放置了一个在整个屏幕上拉伸的元素 (gradient-背景）。我希望元素（渐变背景）隐藏超出其大小的所有内容，但这并没有发生。到最后我才发现我想错了，一头雾水。

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

如何将1个渐变变成多个元素

How to make 1 gradient into several elements

html

css

gradient