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

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;
  
}