Создайте «дыру» в HTML-элементах без режима смешивания: облегчить? ⇐ Html

[Anonymous]

Ссылка на скрипт: https://jsfiddle.net/qz1frsp3/
Я использую mix-blend-mode: Lighten в контейнере, который оборачивает дочерний элемент сплошным черным фоном. Это создает эффект «дырокола», который выглядит так, как будто он прорезает контейнер, обнажая фон тела внизу.
Проблема в том, что режим смешивания-наложения: Lighten очевидно не ограничивается только цветом фона элемента. Он влияет на все внутри элемента и, следовательно, делает все темное прозрачным.
Есть ли способ обойти это, например, исключить элементы из режима смешивания-наложения или альтернативное решение для достижения эффекта «дырокола» без использования режимов наложения?

Код: Выделить всё

section {
background: white;
padding: 100px;
mix-blend-mode: lighten;
}

.hole {
margin: 0 auto;
width: 50%;
background: black;
}

body {
text-align: center;
background: linear-gradient(
90deg,
rgba(255, 0, 0, 1) 0%,
rgba(255, 154, 0, 1) 10%,
rgba(208, 222, 33, 1) 20%,
rgba(79, 220, 74, 1) 30%,
rgba(63, 218, 216, 1) 40%,
rgba(47, 201, 226, 1) 50%,
rgba(28, 127, 238, 1) 60%,
rgba(95, 21, 242, 1) 70%,
rgba(186, 12, 248, 1) 80%,
rgba(251, 7, 217, 1) 90%,
rgba(255, 0, 0, 1) 100%
);
color: white;
}

Код: Выделить всё

This section's background should be transparent thanks to mix-blend-mode: lighten
Problem is, images get made semi-transparent too :(
[img]https://images2.imgbox.com/b6/d1/BG2LLvw4_o.jpg[/img]

Подробнее здесь: https://stackoverflow.com/questions/798 ... de-lighten