Erstellen Sie ein „Loch“ durch HTML-Elemente ohne Mix-Blend-Modus: Aufhellen? ⇐ CSS

[Anonymous]

Ich verwende mix-blend-mode: lighten für einen Container, der ein untergeordnetes Element mit einem durchgehend schwarzen Hintergrund umhüllt. Dadurch entsteht ein „Locheffekt“, der aussieht, als würde er durch den Behälter schneiden, um den Hintergrund des Körpers darunter freizulegen.
Das Problem ist, dass mix-blend-mode: lighten offensichtlich nicht nur auf die Hintergrundfarbe des Elements beschränkt ist. Es betrifft alles innerhalb des Elements und lässt daher alles Dunkle transparent erscheinen.
Gibt es eine Möglichkeit, dies zu umgehen, z. B. Elemente aus dem Mix-Blend-Modus auszuschließen, oder eine alternative Lösung, um den „Locheffekt“ ohne Verwendung von Mischmodi zu erzielen?
Ich möchte, dass die Lösung flexibel ist, sodass Sie mehrere Löcher in derselben Zeile haben können und nicht die Löcher manuell „füllen“ müssen.
Fiddle-Link: https://jsfiddle.net/qz1frsp3/

Code: Select all

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;
}

Code: Select all

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]