哪个更好，CSS 透明度或 PNG 透明度？答案

【问题标题】：Which is superior, CSS transparency or PNG Transparency?哪个更好，CSS 透明度或 PNG 透明度？
【发布时间】：2010-10-07 16:17:05
【问题描述】：

我应该使用 PNG 透明度还是 CSS 透明度？

我的第一反应是使用 CSS。但是我在某处听说 IE 中的过滤器很慢，并且我会使用 PNG 获得更好的结果（忽略 IE6）。

但是根据个人经验，我知道在 FF3 中 PNG 的透明度很慢。

这个问题有明确的答案吗？

谢谢。

【问题讨论】：

【解决方案1】：

它们是针对两个不同问题的两种不同解决方案。 CSS 透明度（我假设您指的是 opacity 属性）将使整个元素（其边框、背景和内容）透明，而 alpha PNG 透明度仅在您使用图像的情况下有用，例如元素背景.

我想不出在很多情况下你可以使用任何一种来达到同样的效果。

当然有RGBA colours in CSS3，但目前浏览器支持太低，无法在面向公众的网站/应用程序中成为可行的选择。

附：我不能说我自己遇到过任何 FF3 alpha PNG 性能问题。

跟进评论：

好的。在这种情况下，我会选择 CSS opacity 属性。

虽然过滤器的性能在 IE6 中可能不是最佳的，但这意味着您不必浪费带宽和对图像进行额外的 HTTP 请求。另外，如果你想让图像在 IE6 中也能工作，你必须使用 AlphaImageLoader，我敢肯定它会比 alpha 过滤器慢（如果不慢的话）。

【讨论】：

我在一些元素上放置了一个透明的覆盖层，在这种情况下，设置覆盖层元素背景图像或不透明度设置将起作用。我的问题是指大多数浏览器中任一解决方案的速度。谢谢。
在回答中回复（太长了）。
我所说的速度是渲染速度，而不是加载速度，在我的情况下，加载速度并不重要。在滚动或显示（IE，使用JS隐藏/显示）时，PNG确实比IE7中的不透明度过滤器表现更好。如果必须，我会为 IE/FF 类使用不同的 css。
我不能说我有任何基准或明确的证据证明一个比另一个快我恐怕。我只能说，所有逻辑都表明（在我看来:-)）不透明度应该比 alpha PNG 图像执行得更好，因为（我假设）开销更少。

【解决方案2】：

我刚刚在 Mac 上的 Firefox 3.0.11 中做了一个非科学的快速测试。

我的测试是覆盖一个 div 并反复上下滚动。

一个用过的css：

background: #000; opacity:0.8;

另一个使用相同的 10px 24 位 PNG。

我用活动监视器测量了以下结果（所以猜测，不准确）

火狐3.0.11

CSS 不透明度：大约 60% 的 CPU 使用率。

PNG：大约 20% 的 CPU 使用率。

Safari 4.0：

CSS 不透明度：大约 80%（峰值为 120%！）

PNG：大约 76%（完全没有峰值）

就性能而言，PNG 似乎是赢家。

【讨论】：

So as far as performance goes, it seems like a PNG is the winner. 至少在 Mac 上。你在 Windows 上测试过吗？
也许我回答得有点晚，但我认为很明显，使用 png 的性能会更好 - 如果你在 CPU 中测量它。但我认为主要的性能问题是 img 大小。由于您可以通过使用 .jpg 来保护大量字节，因此我认为在大多数情况下使用 opacity/rgba 会更好。

【解决方案3】：

使用 png 24 位时，IE 中存在内存泄漏（包括 8 个）！请注意。

我使用带有一些 jquery 的 pngs 来滑动一些文本，脚本非常慢！我删除了背景 png，脚本很好。

【讨论】：

【解决方案4】：

PNG 透明度可以做 CSS 不能做的事情 -- PNG alpha 通道透明度可以对图像的不同部分具有不同程度的部分透明度，而 CSS 不透明度则不能。

【讨论】：

【解决方案5】：

虽然 CSS 可能是“正确”的方式，但我认为 PNG 更安全、更容易且实现更好。

【讨论】：