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

[Anonymous]

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

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

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