在具有不同 z-index 的嵌套组件上使用混合混合模式

Question

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

要注意的是每个 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 融合。如果您从小提琴中的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:

CSS 中创建堆叠上下文的所有内容都必须被视为“孤立”组。 HTML 元素本身不应创建组。

应用了混合的元素必须与该元素所属的堆叠上下文的所有底层内容混合。

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