0

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

我很难指出这个问题的根源，因为当容器内的不同元素本身被赋予属性时，它们div似乎正在破坏元素的mix-blend-mode属性（而不是在所述容器中） 。<h1>mix-blend-mode

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

这是我正在开发的网站的草稿（在 Chrome 中打开！）

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

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

4

1 回答 1

0

问题是由于我有一个空作为我作为背景<div>的第一个元素，它具有一个负数的属性，或者至少可能是一个非零值。一旦我将背景设置为或完全删除了该属性，那么问题就永远不会发生了。<body></body>z-indexz-index<div>0z-indexmix-blend-modeh1

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;
}

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

于 2020-09-06T23:25:28.747 回答