How to make a child DIV remove color transparency from a parent with 40% transparent color on an image?

Question

I have a parent div with:

background-image: url('img.jpg'); background-color: rgba(0,0,0,0.4);

and a child div:

width: 400px; height: 400px;

How to make the child DIV show a part of the parent's background-image without the black transparency?

 .parent { width: 500px; height: 500px; background: url('http://i.imgur.com/Y6a49hy.png'); } .child { background-color: rgba(0, 0, 0, 0.7); width: 100%; height: 100%; } .non-shadowed-div { width: 300px; height: 300px; } 

 <div class="parent"> <div class="child"> <div class="non-shadowed-div"> This div shouldn't be shadowed like the rest of the square </div> </div> </div> 

Answer 1

One option is to do it with box-shadow:

 .outer { background: url('https://fillmurray.com/400/200') no-repeat center; height: 600px; width: 100%; background-size: cover; position: relative; overflow: hidden } .inner { position: absolute; top: 25%; left: 25%; width: 50%; height: 50%; background: transparent; box-shadow: 0 0 0 1000px rgba(0,0,0,.5); } 

 <div class="outer"> <div class="inner">lalalalala</div> </div> 

Answer 2

An alternative to the box shadow answer is just add a border to the inner div

 div { width: 500px; height: 500px; box-sizing:border-box; } .parent { background: url('http://i.imgur.com/Y6a49hy.png'); } .non-shadowed-div { border: 100px solid rgba(0,0,0,0.7); /* 100px border on each side leaves you with a 300px box in the middle */ } 

 <div class="parent"> <div class="non-shadowed-div"> This div shouldn't be shadowed like the rest of the square </div> </div> 

Answer 3

You can simulate this as shown below. Parent has background image only. The child has a big border simulating the overlay of the image.

 .parent { width: 200px; height: 200px; background: url("http://lorempixel.com/200/200"); display: flex; justify-content: center; align-items: center; overflow: hidden; } .child { min-width: 100px; min-height: 100px; background-color: transparent; border: solid rgba(0, 0, 0, 0.8) 10em; } 

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