我应该使用 PNG 透明度还是 CSS 透明度？
我的第一直觉是使用 CSS。但是我在某处听说 IE 中的过滤器很慢，并且使用 PNG 会得到更好的结果（忽略 IE6）。
但是根据个人经验，我知道FF3中的PNG透明度很慢。
这个有确定的答案吗？
谢谢。
Roger
问问题
8451 次
5 回答
12
它们是针对两个不同问题的两种不同解决方案。CSS 透明度（我假设您指的是 opacity 属性）将使整个元素（其边框、背景和内容）透明，而 alpha PNG 透明度仅在您使用图像的情况下有用，例如元素背景.
我想不出在很多情况下你可以使用任何一种来达到同样的效果。
CSS3中当然有RGBA 颜色，但是浏览器支持目前太低，无法在面向公众的网站/应用程序中成为可行的选择。
PS 我不能说我自己遇到了任何 FF3 alpha PNG 性能问题。
后续评论：
好的。在这种情况下，我会选择 CSS opacity 属性。
尽管过滤器性能在 IE6 中可能不是最佳的，但这意味着您不必浪费带宽和对图像的额外 HTTP 请求。另外，如果你想让图像在 IE6 中也能工作，你必须使用 AlphaImageLoader，我敢肯定它会比 alpha 过滤器慢（如果不慢的话）。
于 2009-02-14T20:50:01.423 回答
6
我刚刚在 Mac 上的 Firefox 3.0.11 中做了一个快速的非科学测试。
我的测试是覆盖一个 div 并反复上下滚动。
一个用过的css：
background: #000; opacity:0.8;
另一个使用相同的 10 像素 24 位 PNG。
我用活动监视器测量了以下结果（所以猜测，不准确）
火狐 3.0.11
CSS 不透明度：大约 60% 的 cpu 使用率。
PNG：大约 20% 的 CPU 使用率。
Safari 4.0：
CSS 不透明度：大约 80%（峰值为 120%！）
PNG：大约 76%（完全没有峰值）
所以就性能而言，似乎 PNG 是赢家。
于 2009-06-23T22:56:26.493 回答
4
使用 png 24 位时，IE 中存在 MEMORY LEAKS（包括 8 个）！请注意。
我使用带有一些 jquery 的 pngs 来滑动一些文本，脚本非常慢！我删除了背景png，脚本很好。
于 2010-02-21T23:11:14.210 回答
1
PNG透明度可以做CSS不能做的事情——PNG alpha通道透明度可以对图像的不同部分具有不同程度的部分透明度，而CSS不透明度不能做到这一点。
于 2009-02-14T21:30:16.193 回答
0
尽管 CSS 可能是“正确”的方式，但我认为 PNG 更安全、更容易且实现更好。
于 2009-12-02T11:12:57.827 回答