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

Question

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

问题是，每个div都必须有自己独立的z索引(由于可访问性的原因不能更改这一点)。

用一个例子来解释这个问题比较容易：

​

#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索引，您将看到混合工作正常；但是，出于可访问性的原因，这不是一个选项，如上所述。

我在这里做了个小摆设：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>

​

来自规格：

CSS中创建堆叠上下文的所有内容都必须被视为“孤立的”组。HTML元素本身不应该创建组。 应用了混合的元素，必须与的所有底层内容混合--元素属于的堆叠上下文。

有关堆栈上下文的更多细节的相关问题：为什么一个z索引值的元素不能覆盖它的子元素？