如何使子div透明？答案

【问题标题】：How to make a child div transparent?如何使子div透明？
【发布时间】：2017-03-13 06:11:14
【问题描述】：

假设有一个 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>

【问题讨论】：

标签： html css nested transparency

【解决方案1】：

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

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

以下 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>

【讨论】：

【解决方案2】：

查看this Fiddle

基于：

.parent{
    width:300px;
    height:300px;
    position:relative;
    border:1px solid red;
}
.parent:after{
    content:'';
    background:url('http://www.dummyimage.com/300x300/000/fff&text=parent+image');
    width:300px;
    height:300px;
    position:absolute;
    top:0;
    left:0;
    opacity:0.5;
}
.child{
    background:yellow;
    position:relative;
    z-index:1;
}

ref

【讨论】：

不，这不是我问的。在您提供的小提琴中，子 div 应该继承正文背景。不透明度对我来说不是问题。这是一种在不继承父级不透明度的情况下在父级上显示子 div 的解决方案。那不是我问的。
子 div 应该是绿色的，它应该看起来像穿过父 div 的颜色，忽略它并从其祖父母那里继承绿色。
您能否提供一些图片作为您的答案？它可能会有所帮助
已添加参考图片。