如何将子元素背景颜色（透明）设置为视口背景或正文标记背景颜色

Question

我有以下标记，我想让div（class child）透明（类似于hole），在这种情况下应该显示背景颜色为黄色。请帮我解决这个问题？

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

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用带有洞的SVG文件。