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

问题描述

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

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

.wrapper{背景图片: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{宽度:100px；高度:100px；背景:#ff0000；填充:10px；保证金:自动；}.child-div{宽度:60%；高度:60%；保证金:自动；背景:透明；边框:1px 实心；}

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

解决方案

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

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

以下 css 将完成工作:

.parent-div {溢出:隐藏；}.child-div {框阴影:0 0 0 500px #f00;}

.wrapper {背景图片: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 {溢出:隐藏；宽度:100px；高度:100px；填充:10px；保证金:自动；}.child-div {框阴影:0 0 0 500px #f00;边框:1px 实心；宽度:60%；高度:60%；保证金:自动；}

<div class="parent-div"><div class="child-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屋！