如何使小孩div透明？ [英] How to make a child div transparent?

问题描述

假设有一个div，比如说 parent-div 。
父div具有背景颜色。如果需要将子div child-div 设置为透明背景，以便使用祖父母div的背景图像进行设置，并使用类名称 wrapper ？

我知道子div可以从父div继承css属性，但是如何将背景设置为透明，使整个图片显示像父母div有一个漏洞呢？

  .wrapper {background-image：url（'http：// media ？.istockphoto.com /照片/中等金色棕色木材纹理背景图象-id513694258 K = 6和M = 513694258&安培; S = 170667a&安培; W = 0&安培; H = xETakP7VjpAtRj9e6rJRYNqw_AJLZ9ovLlC4ebR5BOQ ='）;}父 - div {width：100px; height：100px;背景：＃ff0000;填充：10px; margin：auto;}。child-div {width：60％;身高：60％;保证金：汽车;背景：透明; border：1px solid;}  

< div class =包装> < div class =parent-div> < div class =child-div> < / DIV> < / div>< / div>

解决方案

不要应用背景 on .parent-div 。

取而代之的是使用一个大的值 box-shadow .child-div 并在上添加 overflow：hidden .brent-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;宽度：100px; height：100px;填充：10px; margin：auto;}。child-div {box-shadow：0 0 0 500px＃f00; border：1px solid;宽度：60％;身高：60％;保证金：汽车; }

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

Suppose there is a div, say "parent-div". The parent div has a background color. What if the child div, "child-div", needs to be set with a transparent background,such that it is set with the background image of the grandparent div, with class name "wrapper"?

I know that a child div can inherit css properties from parent div, but how do I set the background to transparent, making the whole picture appear like the parent-div has a hole in it?

.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>

解决方案

Don't apply background on .parent-div.

Instead use a large value of box-shadow on .child-div and add overflow: hidden on .parent-div to hide unwanted shadow effect.

Following css will do the work:

.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>

这篇关于如何使小孩div透明？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！