如何更改重叠元素后面的文本颜色？

Question

我的 React 组件中有白色文本，我希望该文本中延伸到背景上另一个元素后面的部分是橙色的。

我尝试使用混合混合模式：差异；在 CSS 中，但我不知道如何更改为不同的颜色。就我而言，橙色

示例：

JSX：

<div>
  <h2 className="title">
    Explore Your own planet
    In our New metaverse
  </h2>
  <img className="planet" src={PlanetImg}/>
</div>

CSS：

.title {
  position: relative;
  mix-blend-mode: difference;
  z-index: 10;
  ...
}

.planet {
  position: absolute;
  z-index: 0;
  ...
}

怎样才能达到想要的效果？

Answer 1

只要形状是正圆，就可能出现

clip-path:circle()

的诡计。

:root{--radius : 200px;}

.container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.behind,
.top {
position: absolute;
  font-size: 100px;
  font-weight: bolder;
  text-align: center;
}

.behind {
  color: blue;
  z-index=-1;
}

.top {
  clip-path: circle(calc(var(--radius)/2));
  color: orange;
  z-index: 1;
}

div.circle {
  height: var(--radius);
  width: var(--radius);
  border-radius: 50%;
  background-color: green;
  z-index= 0;
}

<div class="container">
  <h1 class="behind">Something</h1>
  <div class="circle"></div>
  <h1 class="top">Something</h1>
</div>