4

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>

enter image description here

Varun Nair
  • 329
  • 1
  • 6
  • 17

2 Answers2

9

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>
Mohammad Usman
  • 37,952
  • 20
  • 92
  • 95
0

Check this Fiddle

based on:

.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

Community
  • 1
  • 1
Aleksey Shmakov
  • 71
  • 11
  • No, this isn't what I asked. In the Fiddle you provided, the child div should inherit the body background. Opacity is not the issue for me. This is a solution to display a child div over a parent without inheriting opacity from parent. That's not what I asked. – Varun Nair Oct 31 '16 at 06:30
  • The child div should be green, it should appear like it goes through the parent div's color, ignoring it and inheriting the green from its grandparent. – Varun Nair Oct 31 '16 at 06:31
  • could you provide some picture for your answer please? It may help – Aleksey Shmakov Oct 31 '16 at 06:32
  • 1
    Reference image has been added. – Varun Nair Oct 31 '16 at 06:44