我正在尝试对网站上的文本应用效果，其中字体颜色会根据屏幕上的文本位置而变化。您可以看到文本分为黑色和白色，当我更改浏览器窗口大小时，白色和黑色区域会增加或减少，具体取决于背景的位置 - 在本例中是黑色 div 和图片。
This should be the final result:
But I'm getting this:
正如你所看到的，在字体与白色背景相遇的地方，颜色变成黑色，这很好，但是当字体穿过女士图像时，字体变得有点透明，显示后面的图像。在这种情况下，即使字体与背景图像交叉，字体仍应为黑色。
我使用 CSS 上的 mix-blend-mode 实现了这种效果，但我找不到文本与背景图像相遇的解决方案。
你们有任何其他解决方案或关于如何改进这个问题的想法吗？ 我在网上找不到任何东西。
这是组件代码：
import { NavLink } from "react-router-dom";
import arrowRight from "./../../../assets/icon-arrow-right.svg";
import heroImg from "./../../../assets/desktop/[email protected]";
export function HomeTop() {
return (
<section className={style.homeTopContainer}>
<h1>
Modern <br /> Art Gallery
</h1>
<div className={style.blackBg}></div>
<img
src={heroImg}
alt="a man and a woman standing in front of a paint hanging on a white wall"
className={style.heroImg}
/>
<div className={style.topTextBtn}>
<p>
The arts in the collection of the Modern Art Gallery all started from
a spark of inspiration. Will these pieces inspire you? Visit us and
find out.
</p>
<NavLink
to="/location"
style={{ textDecoration: "none" }}
className={style.locationBtn}
>
<button className={style.btn1}>Our Location</button>
<button className={style.btn2}>
<img src={arrowRight} alt="arrow right icon" />
</button>
</NavLink>
</div>
</section>
);
}
这是应用于 H1 的 CSS：
.homeTopContainer h1 {
position: absolute;
width: 284px;
left: 14.4%;
top: 20%;
font-weight: 900;
font-size: 9.6rem;
color: var(--color4-white);
line-height: 8.8rem;
text-transform: uppercase;
white-space: nowrap;
mix-blend-mode:difference;
}
这是网站，如果您想查看的话：现代艺术画廊.
如果您想使用代码，这也是类似的情况：https://jsfiddle.net/4nwbprg8/
我怀疑是否可以通过使用 mix-blend-mode: Difference 来实现您想要的效果。它的工作方式不同，因为它遇到背景颜色并计算它们，然后你得到颜色的结果。您可以尝试使用“//codepen.io/ashraftoobler/pen/VeoVPL”