哪个是优越的,CSS透明度或PNG透明度？

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

我的第一直觉是使用CSS.但是我听说IE中的过滤器很慢,我会用PNG(忽略IE6)得到更好的结果.

但是根据个人经验,我知道FF3的PNG透明度很慢.

对此有明确的答案吗？

谢谢.

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

我不能想到很多情况你可以使用相同的效果.

CSS3中当然有RGBA颜色,但浏览器支持目前太低,无法在面向公众的站点/应用程序中成为可行的选择.

PS我不能说我自己遇到任何FF3 alpha PNG性能问题.

跟进评论:

好.在那种情况下,我会选择CSS opacity属性.

尽管过滤器性能在IE6中可能不是最佳,但这意味着您不必浪费带宽和图像上的额外HTTP请求.另外,如果你想让图像在IE6中工作,你必须使用AlphaImageLoader,我肯定会比alpha过滤器慢(如果不慢).

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

我的测试是覆盖div并反复上下滚动.

一个用过css:

background: #000; opacity:0.8;

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

我用Activity监视器测量了以下结果(所以猜测,不精确)

Firefox 3.0.11

CSS不透明度:大约60%的CPU使用率.

PNG:大约20%的CPU使用率.

Safari 4.0:

CSS不透明度:大约80%(峰值为120%!)

PNG:约76%(完全没有峰值)

因此,就性能而言,似乎PNG就是胜利者.