如何避免mix-blend-mode导致子元素span变色？

问题核心 #

mix-blend-mode是可继承的CSS属性，直接给<a>设置该属性时，子元素<span>会继承混合模式，导致文字颜色被改变。要解决这个问题，需要将混合模式的应用范围限制在背景层，而非整个<a>元素。

可行方案 #

把混合模式从<a>元素转移到它的伪元素上，让伪元素作为独立背景层实现混合效果，<a>和内部<span>不应用任何混合模式，这样<span>的颜色就能保持原始设置。

修改后的完整代码 #

HTML结构

<a href="#">
  <span>我是不受混合模式影响的文字</span>
</a>

CSS代码

a {
    width: 160px;
    height: 160px;
    margin: 0 auto;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff; /* span继承该颜色，不受混合模式干扰 */
    padding-top: 5px;
    font-size: 16px;
    position: relative;
    top: 0;
    transition: .2s linear;
    font-weight: bold;
    /* 移除a本身的mix-blend-mode和background-color */
}

/* 用伪元素实现带混合模式的背景 */
a::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: inherit; /* 继承a的圆角 */
    background-color: #000;
    mix-blend-mode: exclusion; /* 仅在伪元素上应用混合模式 */
    z-index: -1; /* 将伪元素置于文字下方 */
}

span {
    position: relative;
    z-index: 1; /* 确保文字在伪元素上方 */
}

之前尝试无效的原因 #

你之前的代码中，<a>元素仍保留了mix-blend-mode: exclusion，导致<span>依旧继承该属性；同时伪元素添加的filter: invert(1)属于额外颜色反转处理，干扰了预期的混合效果，因此无法解决问题。

内容的提问来源于stack exchange，提问作者yOshim1