混合-混合模式差异混合结果

Question

我有混合混合模式的差异，它可以正常工作，但是如果某些内容与标题重叠，那么它会更改标题的整个内容，而不仅仅是重叠区域更好的图像，以阐明我的观点

所有炒锅都很好，此处的文字为白色，因此变成黑色

但是当图像与标题重叠时，即使右边的马其顿一词也变成白色，我只需要保持马其顿为黑色，因为图像未与之重叠

<header id="header">
    <p class="header__role">An innovation company.</p>
    <h1 class="header__name">Watan —  N0.1</h1>
    <p class="header__location">Macedonia</p>
</header>

css

#header {
    position: fixed;
    right: 0;
    left: 0;
    height: 3.55556rem;
    padding: 0.44444rem 1.66667rem;
    mix-blend-mode: difference;
    color: #fff;
    border-bottom: 1px solid hsla(0,0%,95.7%,.25);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header__name {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

img {
    width: 50vw;
    height: 200vh;
}