PNG具有黑色背景，继承不透明度并变得透明

Question

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我对css规则感到困惑。我在页面上做了一些调整，我看到了一些东西，我之前看到过的东西。存在具有黑色背景的PNG，并且当父标签也具有黑色背景并且具有不透明度值＆lt; 1比PNG的黑色部分也变得透明。这怎么可能？

Answer 1

子元素从父级继承不透明度。因此，在这种情况下，任何背景图像（以及其他所有内容）都将变得透明。 不透明度会影响每个内在元素。

Answer 2

通过将包含<a>设置为不透明度为0.7，包含的<img>也变得透明。事实上，它在整个图像中变得透明，而不仅仅是黑色部分（尽管这并不是很明显）。

如果您想要透明背景，请将背景颜色设置为透明：

#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>  

编辑以下是Chrome中代码的代码：