画像の上にマスクを作成する方法（クリップパスではなく反対です）

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>