html - 共享相同线性渐变背景的 CSS 元素

Question

我想在我的元素中做一个部分，其中的元素共享相同的线性背景图像，所有这些元素都被不同的颜色背景包围。

我可以对 z-indexes 和背景做一些处理:继承，但问题是每个元素都包含整个渐变，而不是它的一部分，这取决于它的位置，就像我想要的那样。

这是我的尝试:

.gradient {
  position: absolute;
  height: 100vh;
  width: 100vw;
  background: linear-gradient(90deg, rgba(242, 251, 95, 1) 0%, rgba(0, 89, 135, 1) 100%, rgba(99, 102, 23, 1) 100%);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 100px;
}

.bg {
  position: absolute;
  min-width: 80%;
  height: 80%;
  background-color: red;
}

.circle {
  position: relative;
  border-radius: 50%;
  min-width: 100px;
  min-height: 100px;
  border: 2px solid green;
  background: inherit;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
}

<div class="gradient">
  <div class="circle">ABC</div>
  <div class="circle">ABC</div>
  <div class="bg"></div>
</div>

我很难用英语描述它，所以我附上了两张图片。

What I did

What I want

Answer 1

您可以尝试将圆圈移动到红色 div 中，并为其设置混合混合模式，并将圆圈设置为灰色背景:

.gradient {
  position: absolute;
  height: 100vh;
  width: 100vw;
  background: linear-gradient(90deg, rgba(242, 251, 95, 1) 0%, rgba(0, 89, 135, 1) 100%, rgba(99, 102, 23, 1) 100%);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bg {
  min-width: 80%;
  height: 80%;
  background-color: red;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 100px;
  mix-blend-mode: hard-light;
}

.circle {
  position: relative;
  border-radius: 50%;
  min-width: 100px;
  min-height: 100px;
  border: 2px solid grey;
  background: inherit;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  background-color: grey;
}

<div class="gradient">
  <div class="bg">
    <div class="circle">ABC</div>
    <div class="circle">ABC</div>
  </div>
</div>