Webkit不透明度渲染

顶部文本的不透明度为0.5。其他图像的颜色为#dddddd（十六进制）。

这是我使用的代码：

<p style="font:60px Arial;font-weight:bold;opacity:0.5">Hello!</p> 

<p style="font:60px Arial;font-weight:bold;color:#888">Hello!</p>

顶部的文本已锯齿边缘。我想知道这是为什么。

2010-10-15 alexy13

这是什么浏览器？我知道Chrome/Win对不透明度和抗锯齿处理效果不佳 – roryf 2010-10-15 10:56:53

尝试其他浏览器。他们如何执行？ – 2010-10-15 10:57:01

我使用的浏览器是Safari。 – alexy13 2010-10-15 23:28:20

我不知道这是为什么，但只是为了测试，尝试使用RGBA，而不是不透明度（这是更好的做法，毕竟，但是IE不支持它）

2010-10-15 10:54:10 Jasmo

一种可能回答可能是顶部样本在白色（或透明）上呈现为黑色，而假设的伽马值则是基于该值的抗锯齿。一旦它在0.5不透明度的白色背景上呈现，像素的值将全部增加50％，并且伽马值不再适合确保像素值之间的平滑变化的感知。

至少这是我的猜测。希望它是有道理的。

2010-10-15 11:18:59 andrewmu

字体在浏览器上呈现的方式取决于浏览器本身和操作系统。例如，这可能会在OSX上看起来更好，因为它具有全系统的抗锯齿功能。

我不同意rgba是更好的做法虽然，现在opacity是一个更可靠的解决方案，以实现透明度，尽管它的缺点相比rgba。所有浏览器都支持opacity，即使是IE 5，但您需要添加一些时髦的CSS属性才能使其运行。 This post提供了一个很好的解决方案：

.transparent { 
    zoom: 1; 
    filter: alpha(opacity=50); 
    opacity: 0.5; 
}

rgba是好的，面向未来的，但在IE浏览器的一些版本不支持。我只在针对响应式设计的现代设备时才使用它。

2012-12-21 00:31:37

回答