CSS混合混合模式不适用于文本和背景图像

Question

在我的新项目中，我想使用mix-blend-mode: difference 作为我的徽标（顶部中心），但它不起作用。

See project

在 CSS 中，我使用了这个：

.sitetitle-txt-inner span {
    mix-blend-mode: difference;
}

问题出在哪里？

Answer 1

你的父 .sitetitle-txt-inner 是空的和透明的。

尝试为<div> 和<span> 添加不同的背景颜色，您会发现混合效果很好。

---

红蓝结果：