Html 如果背景图像放置在另一个标记中，则CSS混合模式不起作用

我有一个带有

标题和
横幅的简单页面布局

我想使
标题
透明，并位于
横幅
图像的顶部（稍后我可能会将其转换为滑块，为了简单起见，这里我使用了单个图像）

由于背景图像的原因，
标题中的
菜单
不清晰可见，因此我决定使用
混合模式：差异
，这是我应该使用的

但是文本没有改变颜色

正如您在下面的代码片段中所看到的，我已将
mix-blend模式
应用于







.header
正在创建堆叠上下文，因为它已定义了
z-index

删除z索引：


.header{
位置：绝对位置；
宽度：100%；
顶部：50px；
左：0；
}
.割台.割台底部ul{
列表样式：无；
保证金：0；
填充：0；
文本对齐：右对齐；
位置：相对位置；
}
.header.header\u底部ul li{
显示：内联块；
}
.header.header\u底部ul li a{
文字装饰：无；
显示：块；
填充：0 20px；
颜色：#fff；
混合模式：差异化；
}
.banner img{
宽度：100%；
}
身体{
保证金：0
}









将物品移动到标题有助于我实现这一点。z-index不在我的实际代码中（我正在处理的代码）。这真的很有帮助！但它也适用于标志，这真的很糟糕。我可以从标题下的混合混合模式中排除元素吗？就像徽标现在全部反转一样。@DebsmitaPaul您的代码中没有徽标…哦，对不起，我将更新代码。我在上面添加了一个额外的代码段。非常感谢。保留您的初始代码，只添加徽标，否则您将使我的答案无关确定。。。我会换的。