使用 mix-blend-mode 设置的元素会破坏具有 mix-blend-mode 属性的其他元素（Chrome）答案

【问题标题】：Elements set with mix-blend-mode break other element with mix-blend-mode property (Chrome)使用 mix-blend-mode 设置的元素会破坏具有 mix-blend-mode 属性的其他元素（Chrome）
【发布时间】：2020-12-12 13:57:39
【问题描述】：

我的h1 元素失去了它的mix-blend-mode 属性，默认恢复为白色，而DOM 中较低的另一个元素添加了它自己的mix-blend-mode 属性。

我很难指出这个问题的根源，因为div 容器内的不同元素似乎破坏了<h1> 元素（不在所述容器中）的mix-blend-mode 属性（不在所述容器中）他们自己被赋予了一个mix-blend-mode 属性。

在 Chrome 和 Firefox 上测试时，我只能在 Chrome 上产生此问题。由于某种原因，我只能在我的网站上产生这个问题，而不是在 codepen 或类似的东西中。

这是website I'm working on 的草稿（在 Chrome 中打开！）

当您（持续）将鼠标悬停在示例视频元素（播放视频，稍等片刻开始）上时，h1 将失去其mix-blend-mode 属性，变为白色。这是我不想要的。我确实希望“视频”文本在您悬停示例视频时获得mix-blend-mode 属性，它已经正确执行了，我认为这会以某种方式导致问题。

（在 css 文件中有很多额外的 css 没有附加到任何东西上，因为我必须去除许多 HTML 元素。）

【问题讨论】：

标签： html css google-chrome mix-blend-mode

【解决方案1】：

问题是由以下事实引起的也许值。一旦我将我的背景<div> 的z-index 设置为0 或完全删除z-index 属性，那么h1 上的mix-blend-mode 问题就永远不会发生了。

HTML：

<body>
  <div id="bg"></div>
  ...
  ...
</body>

问题 CSS：


#bg {
  background-image: url("../img/someImage.jpg");
  width: 100vw;
  height: 100vh;
  position: fixed;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  z-index: -10;
}

我不明白为什么这解决了问题，因为我偶然想出了解决方案。

【讨论】：