How to make a child div transparent? - html

Question

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>

Answer 1

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>

Answer 2

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