Transparently obvious
I find myself trying to do something simple: making an image 100% opaque when in a div that is set to 80% so that the background shows through (a little) on the div but doesn’t interfere with the image.
I’d demonstrate here, only it turns out to be impossible. Not with the latest CSS, and not with any current browser. What might help is a jQuery plugin called Transify (easy to find). It’s not 100% compatible with my case, but close enough to be worth a bit of exploration.
Since proper opacity controls for backgrounds wont appear until some future incarnation of CSS3, for now we have to resort to hacks involving semi-transparent PNGs, Z-axis hackery, floating layers, etc. Actually, I’m not so sure that a future CSS will do what I want because the explanation of transparency in the spec speaks only about the use of a background colour, not an image. To quote:
CSS3 extends the color value to include the ‘transparent’ keyword to allow its use with all properties that accept a <color> value.
Not exactly clear if this means an image (even one that’s just a solid colour) can have a transparency value, or if it just applies to RGB values.
Categorised as: Protocols & Specs