Wie man eine Kind-Element-Hintergrundfarbe (transparent) für den Viewport-Hintergrund oder Body-Tag-Hintergrundfarbe

Question

Ich habe eine folgende Markup und ich möchte die div (Klasse Kind) transparent machen (ähnlich wie Loch), die den Hintergrund anzeigen sollte Farbe gelb in diesem Fall. Bitte helfen Sie mir, dies zu erreichen?

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

Man könnte darin eine SVG-Datei mit einem Loch verwenden.