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, [click title to read more…]