html - 如何使子div透明？

Question

假设有一个 div，比如“parent-div”。 父 div 具有背景色。如果子 div "child-div"需要设置透明背景怎么办，这样它就设置了祖父 div 的背景图片，类名为 "wrapper "?

我知道子div可以继承父div的css属性，但是如何设置背景为透明，让整个图片看起来像父div有一个洞？

.wrapper{
  background-image: url('http://media.istockphoto.com/photos/medium-golden-brown-wood-texture-background-picture-id513694258?k=6&m=513694258&s=170667a&w=0&h=xETakP7VjpAtRj9e6rJRYNqw_AJLZ9ovLlC4ebR5BOQ=');
}

.parent-div{
  width: 100px;
  height: 100px;
  background: #ff0000;
  padding: 10px;
  margin: auto;
}

.child-div{
  width: 60%;
  height: 60%;
  margin: auto;
  background: transparent;
  border: 1px solid;
}

<div class="wrapper">
  <div class="parent-div">
    <div class="child-div">
    </div>
  </div>
</div>

Answer 1

不要在 .parent-div 上应用 background。

而是在 .child-div 上使用较大的 box-shadow 值，并在 .parent- 上添加 overflow: hidden div 隐藏不需要的阴影效果。

以下 css 将完成工作:

.parent-div {
  overflow: hidden;
}
.child-div {
  box-shadow: 0 0 0 500px #f00;
}

.wrapper {
  background-image: url('http://media.istockphoto.com/photos/medium-golden-brown-wood-texture-background-picture-id513694258?k=6&m=513694258&s=170667a&w=0&h=xETakP7VjpAtRj9e6rJRYNqw_AJLZ9ovLlC4ebR5BOQ=');
}

.parent-div {
  overflow: hidden;
  width: 100px;
  height: 100px;
  padding: 10px;
  margin: auto;
}

.child-div {
  box-shadow: 0 0 0 500px #f00;
  border: 1px solid;
  width: 60%;
  height: 60%;
  margin: auto;
  
}

<div class="wrapper">
  <div class="parent-div">
    <div class="child-div">
    </div>
  </div>
</div>