Webkit不透明度渲染

Question

顶部的文字的不透明度为0.5。另一个图像的颜色为#dddddd（hex）。

这是我正在使用的代码：

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

顶部的文字有锯齿状边缘。我想知道为什么会这样。

Answer 1

一个可能的答案可能是顶部样本在白色（或透明）上呈现为黑色，具有基于此的抗锯齿的假定伽马值。一旦在具有0.5不透明度的白色背景上渲染，像素的值将全部增加50％并且伽马值将不再正确以确保像素值之间的平滑变化的感知。

至少这是我的猜测。希望它有意义。

Answer 2

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

http://www.css3.info/preview/rgba/

Answer 3

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

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

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

rgba很好，面向未来，但某些版本的IE不支持。我只在使用响应式设计的现代设备时使用它。