ビューポートの背景またはボディタグの背景色に子要素の背景色（透明）を作る方法

Question

次のマークアップがあり、div（クラスの子）を透明にする（穴に似ています）、背景を表示する必要があります。この場合は黄色です。これを実現する方法を教えてください。

body { 
 
    background-color: yellow; 
 
    font-family: helvetica, sans-serif; 
 
    margin: 4% 10% 
 
} 
 
.ancestor { 
 
    width: 700px; 
 
    height: 500px; 
 
    background: Red; 
 
} 
 
.parent { 
 
    position: absolute; 
 
    top: 120px; 
 
    left: 190px; 
 
    width: 500px; 
 
    height: 300px; 
 
    background: Green; 
 
} 
 
.child { 
 
    position: absolute; 
 
    top: 70px; 
 
    left: 150px; 
 
    width: 200px; 
 
    height: 150px; 
 
    border: 2px solid black; 
 
    background: transparent; 
 
}

<meta name="viewport" content="width=device-width, initial-scale=1"> 
 

 

 
<div class="ancestor"> 
 
    <!-- ancestor bgcolr red --> 
 
    <div class="parent"> 
 
    <!-- bgcolr green --> 
 
    <div class="child"> 
 
     <!-- bgcolr transparent --> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
`

Answer 1

http://codepen.io/rachelreveley/pen/pEKLGj

body { 
 
    background: url(https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcT2i8QSOCJ7aKXyZb2Rn2a_r-seI_d_pCuEFDoGxyuyC1tkQIOhmRuXae05); 
 
    font-family: helvetica, sans-serif; 
 
    margin: 4% 10% 
 
} 
 
.ancestor { 
 
    width: 700px; 
 
    height: 500px; 
 
    border: 1px solid #c00; 
 
    border-width: 120px 100px 10px 190px; 
 
    background: transparent; 
 
} 
 
.parent { 
 
    width: 410px; 
 
    height: 370px; 
 
    border: 1px solid #0c0; 
 
    border-width: 120px 100px 10px 190px; 
 
    background: transparent; 
 
} 
 
.child { 
 
    width: 408px; 
 
    height: 368px; 
 
    border: 2px solid black; 
 
    background: transparent; 
 
}

<div class="ancestor"> 
 
    <!-- ancestor bgcolr red --> 
 
    <div class="parent"> 
 
    <!-- bgcolr green --> 
 
    <div class="child"> 
 
     <!-- bgcolr transparent --> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

あなたはそれに穴を持つSVGファイルを使用することができます。