时间戳

首页 > 解决方案 > 在具有不同 z-index 的嵌套组件上使用混合混合模式

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

问题描述

我有一个使用嵌套的、绝对定位的 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？

标签： htmlcssmix-blend-mode

解决方案

只需将 应用于mix-blend-modediv #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 元素本身不应创建组。

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

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

推荐阅读