html - 在具有不同 z-index 的嵌套组件上使用 mix-blend-mode

Question

我有一个使用嵌套的、绝对定位的 div 的设置，我需要 mix-blend-mode 将 div 的元素与所有 z-index 低于那个分区。

要注意的是，每个 div 必须有自己独立的 z-index(出于可访问性原因，不能更改)。

用一个例子更容易解释:

#layer-1 {
  width: 700px;
  height: 700px;
  position: absolute;
  background-color: maroon;
  z-index: 1;
}

#layer-2 {
  position: absolute;
  height: 100px;
  width: 200px;
  z-index: 2;
}

#layer-3 {
  position: absolute;
  z-index: 3;
  mix-blend-mode: darken;
}

#layer-3 img {
  width: 300px;
}

<div id="layer-1"></div>

<div id="layer-2">

  <div id="layer-3">
    <img src="https://i.picsum.photos/id/100/2500/1656.jpg" />
  </div>

</div>

我需要 layer-3 内部的图像与 layer-1 混合。如果你从 fiddle 中的 layer-2 移除 z-index，你会看到混合工作正常；但是，如上所述，出于可访问性原因，这不是一个选项。

我在这里制作了一个 jsfiddle:https://jsfiddle.net/gabranches/v6cuL2o4/44/

有什么办法解决这个问题，还是这只是 mix-blend-mode 的限制？

Answer 1

只需将 mix-blend-mode 应用于 div #layer-2。这一个与 #layer-1 位于相同的堆栈上下文中。 #layer-3 或 img 不能直接与 #layer-1

混合

#layer-1 {
  width: 700px;
  height: 700px;
  position: absolute;
  background-color: maroon;
  z-index: 1;
}

#layer-2 {
  position: absolute;
  height: 100px;
  width: 200px;
  z-index: 2;
  mix-blend-mode: darken;
}

#layer-3 {
  position: absolute;
  z-index: 3;
}

#layer-3 img {
  width: 300px;
}

<div id="layer-1"></div>

<div id="layer-2">

  <div id="layer-3">
    <img src="https://i.picsum.photos/id/100/2500/1656.jpg" />
  </div>

</div>

来自 the specification:

Everything in CSS that creates a stacking context must be considered an ‘isolated’ group. HTML elements themselves should not create groups.

An element that has blending applied, must blend with all the underlying content of the stacking context that element belongs to.

有关堆栈上下文的更多详细信息的相关问题:Why can't an element with a z-index value cover its child?