Использование mix-blend-mode на вложенных компонентах с другим z-индексом - PullRequest
Новая
       71

Использование mix-blend-mode на вложенных компонентах с другим z-индексом

1 голос
/ 26 марта 2020

У меня есть установка, которая использует вложенные div-элементы с абсолютным позиционированием, и мне нужно mix-blend-mode, чтобы смешать элементы div со всеми элементами с более низким z-индексом, чем у этого 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. Если вы удалите z-index из layer-2 в скрипте, вы увидите, что смешивание работает правильно; однако это не вариант по причинам доступности, как указано выше.

Я сделал jsfiddle здесь: https://jsfiddle.net/gabranches/v6cuL2o4/44/

Есть ли способ обойти это, или это просто ограничение mix-blend-mode?

1 Ответ

1 голос
/ 26 марта 2020

Просто примените 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-index не может покрыть своего потомка?

...