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

回答