Как создать маску над изображением (не клип-путь, а наоборот)

Question

Я пытаюсь применить маску к div, чтобы я мог видеть ее на фоновом изображении. Все, что я вижу, касается клипов, но я ищу противоположное. Клип-трассы показывают, что находится внутри клипа. Я пытаюсь сделать его маской, чтобы вы видели внешнюю часть клипа.

Here is an example of what I am trying to achieve, а ниже - полное описание примера.

У меня есть div с фоновым изображением. Внутри этого div есть еще один div, который покрывает всю ширину и высоту своего родителя (с фоновым изображением) и имеет полупрозрачный (rgba) цвет фона. Я пытаюсь добавить маску в этот оверлейный div (тот, который имеет цвет фона rgba), чтобы круг был вырезан из середины, который показывает полное фоновое изображение без наложения цвета.

Here is a link to a jsfiddle, который устанавливает то, о чем я говорю, но без маски (так как я не знаю, как это сделать).

<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

Я думаю, что у меня есть решение, используя box shadow, :after и flex. Fiddle. Основываясь на ответе веб-тики 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>