Webkit opacity rendering

The text on the top has the opacity of 0.5. The other image has a color of #dddddd (hex).

This is the code I am using:

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

<p style="font:60px Arial;font-wei开发者_如何学Goght:bold;color:#888">Hello!</p>

The text on the top has jagged edges. I'm wondering why that is.

One possible answer could be that the top sample was rendered as black on white (or transparent) with the assumed gamma value for the anti-aliasing based on that. Once it was rendered on a white background with 0.5 opacity, the values of the pixels would all be increased by 50% and the gamma value would no longer be right to ensure the perception of smooth changes between the pixel values.

At least that's my guess. Hope it makes sense.

I don't know why that is, but just for testing, try use RGBA instead of opacity (it's better practice after all, yet IE doesn't support it)

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

The way fonts render on browsers depend both of the browser itself and the operating system. That would probably look better on OSX, for instance, because it has a system-wide anti-aliasing.

I don't agree that rgba is better practice though, right now opacity is a much more reliable solution to implement opacity, in spite of its shortcomings compared to rgba. opacity is supported on all browsers, even IE 5, but you'll need to add some funky CSS properties to get it to work. This post provides a good solution:

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

rgba is nice and future-proof, but is not supported in some versions of IE. I only use it when targeting modern devices on responsive design.