How to make a child div transparent?

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 transparen

Answer 1

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