继承不透明度并变为透明的黑色背景的 PNG答案

【问题标题】：PNG with black background that inherits opacity and becomes transparent继承不透明度并变为透明的黑色背景的 PNG
【发布时间】：2014-11-12 17:14:36
【问题描述】：

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

我对 CSS 规则感到困惑。我正在对页面进行一些调整，我看到了一些我以前见过的新东西。有一个黑色背景的PNG，当父标签也有黑色背景并且不透明度值 PNG 的黑色部分也会变得透明。这怎么可能？

【问题讨论】：

你有没有注意到不那么黑的部分也变成了透明的。这是预期的行为。
也许适合你。在 Photoshop 中尝试相同的操作。你会看到，这是有区别的。看起来，浏览器正在将整个 div（具有不透明度规则）预先组合成一个 png，而不是让它变得透明。对我来说，这不是例外行为。
好的，然后是 Photoshop 示例。在 Photoshop 中打开 Pizza.png。在其后面放置一个纯黑色图层。将两个图层都放在图层集中。设置不透明度 图层集 的不透明度为 70%。将 background.jpg 放在图层集后面并观察结果。

标签： css png transparency alpha

【解决方案1】：

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

【讨论】：

你误会了。 child-png 的黑色部分变为 100% 透明。其他部分继承了 e.G.不透明度：0.9。在此处查看：s392610445.online.de/index.php?content=pizza => 在比萨图像下方是带有文本“比萨”的 png。下载它，你就会明白这个问题。

【解决方案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 中的代码：

【讨论】：

"包含的变得透明..." 那不正确。黑色部分变为 100% 透明，其余 png 继承 0.7。我只是想了解浏览器是如何处理这个问题的。
@KevinTurner，你用的是什么浏览器？在我的浏览器（Chrome）中，我看不到您在描述什么。你能附上你的问题的截图吗？