So erstellen Sie eine Maske über ein Bild (nicht ein Clip-Pfad, aber das Gegenteil)

Question

Ich versuche, eine Maske auf ein Div anzuwenden, so dass ich es durch ein Hintergrundbild sehen kann. Alles, was ich sehe, ist über Clip-Pfade, aber ich suche das Gegenteil davon. Clip-Pfade zeigen, was sich innerhalb des Clips befindet. Ich versuche, es eine Maske zu haben, so dass du die Außenseite des Clips siehst.

Here is an example of what I am trying to achieve, und unten ist eine vollständige Beschreibung des Beispiels.

Ich habe ein div mit einem Hintergrundbild. Innerhalb dieses div befindet sich ein weiteres div, das die gesamte Breite und Höhe des übergeordneten Elements (mit dem Hintergrundbild) abdeckt und eine halbtransparente (rgba) Hintergrundfarbe hat. Ich versuche, eine Maske zu diesem Overlay div hinzuzufügen (die mit der rgba Hintergrundfarbe), so dass ein Kreis aus der Mitte herausgeschnitten wird, der das vollständige Hintergrundbild ohne die Farbüberlagerung zeigt.

Here is a link to a jsfiddle das setzt, worüber ich spreche, aber ohne die Maske (da ich nicht weiß, wie es geht).

<div class="backgroundImage"> 
    <div class="backgroundOverlayWithMask"> 
    <!-- content will be here --> 
    </div> 
</div> 

.backgroundImage { 
    width: 100%; 
    height: 500px; 
    background: url(https://upload.wikimedia.org/wikipedia/commons/4/47/New_york_times_square-terabass.jpg) no-repeat center center; 
    background-size: cover 
} 

.backgroundOverlayWithMask { 
    width: 100%; 
    height: 500px; 
    background-color: rgba(0, 0, 0, 0.75); 
} 

Answer 1

Ich glaube, ich habe eine Lösung mit box shadow, :after und flex. Fiddle. Basierend auf der Web-Tiki-Antwort here.

#inner { 
 
    position: relative; 
 
    width: 100%; 
 
    height: 200px; 
 
    overflow: hidden; 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 
#inner:after { 
 
    content: ''; 
 
    border-radius: 100%; 
 
    width: 150px; 
 
    height: 150px; 
 
    box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0.5); 
 
    -webkit-box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0.5); 
 
    -moz-box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0.5); 
 
    align-self: center; 
 
} 
 
#container { 
 
    background: url('http://via.placeholder.com/800x200'); 
 
    background-size: cover; 
 
}

<div id="container"> 
 
    <div id="inner"> 
 
    </div> 
 
</div>