在具有不同z索引的嵌套组件上使用混合混合模式 [英] Using mix-blend-mode on nested components with a different z-index

问题描述

我有一个使用嵌套的，绝对位置的div的设置，并且我需要 mix-blend-mode 来将div的元素与所有z-index比其低的元素混合在一起该div.

I have a setup that uses nested, absolute-positioned divs, and I need mix-blend-mode to blend the elements of a div with all of elements that have a lower z-index than that div.

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

The catch is that each div must have its own independent z-index (this cannot be changed for accessibility reasons).

用一个例子更容易解释:

This is easier to explain with an example:

#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，您将看到混合正常；但是，如上所述，出于可访问性原因，这不是一种选择.

I need the image that's inside of layer-3 to blend with layer-1. If you remove the z-index from layer-2 in the fiddle, you will see that the blending works properly; however, this is not an option for accessibility reasons, as stated above.

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

I have made a jsfiddle here: https://jsfiddle.net/gabranches/v6cuL2o4/44/

有没有解决的办法，或者这仅仅是 mix-blend-mode 的限制?

Is there some way around this, or is this just a limitation of mix-blend-mode?

推荐答案

只需将 mix-blend-mode 应用于div #layer-2 .这与#layer-1 在同一堆栈上下文中.#layer-3 或 img 无法直接与#layer-1

Simply apply the mix-blend-mode to the div #layer-2. This one is on the same stacking context with #layer-1. #layer-3 or img cannot blend directly with #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元素本身不应该创建组.

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.

有关堆栈上下文的更多详细信息，请参见相关问题:为什么带有z-index值的元素无法覆盖其子级?

Related question for more detail about stacking context: Why can't an element with a z-index value cover its child?

这篇关于在具有不同z索引的嵌套组件上使用混合混合模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！