使用 mix-blend-mode 设置的元素使用 mix-blend-mode 属性 (Chrome) 打破其他元素

Question

我的 h1 元素失去了它的 mix-blend-mode 属性，默认变回白色，而 DOM 下方的另一个元素有自己的 mix-blend-mode 属性添加。

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

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

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

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

（css 文件中有很多额外的 css 没有附加到任何东西，因为我不得不删除许多 HTML 元素。）

Answer 1

问题是因为我有一个空的 <div> 作为我 <body></body> 中的第一个元素，作为具有 z-index 属性的背景一个负数，或者至少是一个 non-zero 值。一旦我将背景 <div> 的 z-index 设置为 0 或完全删除 z-index 属性然后 [=20= 上的 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;
}

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

使用 mix-blend-mode 设置的元素使用 mix-blend-mode 属性 (Chrome) 打破其他元素

Elements set with mix-blend-mode break other element with mix-blend-mode property (Chrome)

html

css

google-chrome

mix-blend-mode