PNG with black background that inherits opacity and becomes transparent - css

Question

#wrapper {
padding: 20px;
background-image: url('http://s492610445.online.de/images/background.jpg')
}
#a {
padding: 25px;
background: #000;
opacity: 0.7;
}
h2 { font-family: sans-serif; color: #fff; margin: 5px 0; }
<div id="wrapper">
<h2>orig. Image</h2>
<img src="http://s492610445.online.de/cat/pizza.png" />
<div id="a">
<h2>Image in tag with 0.7 opacity</h2>
<img src="http://s492610445.online.de/cat/pizza.png" />
</div>
</div>
I'm confused about a css rule. I am making some adjustments on a page and I saw something, I have newer seen before. There is a PNG with black background, and when a parent tag has a black background too and has a opacity-value < 1 than the black parts of the PNG will become transparent too. How is this possible?

Answer 1

The child element inherits opacity from parent. So, any background image (and everything else) will become transparent in such case.
Opacity will effect every inner element.

Answer 2

By setting the containing <a> to have an opacity of 0.7, the contained <img> becomes transparent too. In fact it becomes transparent throughout the whole image, not just the black portions (although that's not immediately obvious).
If you want a transparent background, set the background colour to be transparent:
#wrapper {
padding: 20px;
background-image: url('http://s392610445.online.de/images/background.jpg')
}
#a {
padding: 25px;
background: rgba(0,0,0,0.7);
}
h2 { font-family: sans-serif; color: #fff; margin: 5px 0; }
<div id="wrapper">
<h2>orig. Image</h2>
<img src="http://s392610445.online.de/cat/pizza.png" />
<div id="a">
<h2>Image in tag with 0.7 opacity</h2>
<img src="http://s392610445.online.de/cat/pizza.png" />
</div>
</div>
EDIT Here is what your code looks like in Chrome for me: