Transparent tinted table cells

If you had a link to what you've seen it would help.

But in general that could be (1) the image is a background image (2) the content 'above' the image is in a div (layer) which is set in zorder (z index) 'above' the image in question.

To get it to look translucent... there are GIF images whereby you get an on/off alpha... You can use these to dither a pattern which looks like a filled area of approx 50% 'transparency' (every other line horizontally, vertically, or every other pixel in a checkerboard pattern). If you were to use for example a tiled GIF image which is a 'checkerboard' dither of medium grey in a layer 'above' other content, it would appear to be a translucent window of grey (on closer inspection you'd see the dither).

The PNG image format also supports transparency, and actually supports alpha transparency (like photoshop layer opacity/masking/etc.). Problem is none of the browsers ever fully/properly supported PNG rendering -- you can technically save a PNG as 8-24 bit with alpha -- much more flexible than GIF. It compresses via color reduction and then some basic file compression (like GIF), so its really too bad it was never fully implemented.

The only 'hack' method I could think of that could get your true translucency/alpha channel would be to bring PNG8/24 images exported from Macromedia Fireworks (very important as ones from Photoshop/IR do not work the same way in this method) and put them in a Flash movie. Then -- only for Internet Explorer and I believe only on PC -- you can embed the flash movie on your page with the background property set to 'transparent'.

What happens is, the flash movie in a layer on the page will have no solid bounding background... and if there are any alpha images/soft edges/etc. in the movie, it will render right on top of your page.

Of course this limits you to pretty much IE/PC users only (any version of flash from 4 up). A significant number of people -- but not everyone.

Hope this helps,
Neil

alinear.net

To clarify, forget Flash and Fireworks. Just use this workaround provided by Internet Explorer Alpha filters, as explained on HowToCreate.co.uk and first posted somewhere in the discuss section of an alistapart article.

If you're thinking of something like the complexspiral demo, the all CSS approach used will not work in Internet Explorer, as explained on that page. However, using an alpha transparent background image instead of a background transparency CSS property would work around it, with the IE filters explained above.

Bah, you're no fun! =p

You're welcome, though ;)

No, that is not correct, unfortunately. This is the CSS example they give, further down:

<!--[if gte IE 5.5]>
<style type="text/css">
#alImg1 img, #alImg2 img { filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0); }
#alImg1 { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='varyAlpha.png'); }
#alImg2 { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='alphaTwo.png'); }
</style>
<![endif]-->

...

<span id="alImg1" style="width:400px;height:32px;">
<img src="varyAlpha.png" width="400" height="32" border="0" alt=""></span>
<span id="alImg2" style="width:30px;height:50px;">
<img src="alphaTwo.png" width="30" height="50" border="0" alt=""></span>

The way it's done in the first example is to group the statements together in one huge [if gte IE 5.5] conditional comment (which means only IE 5.5 will render that part of the CSS).

I would experiment further with the technique to see if I can directly apply it to background-images, but otherwise, try to achieve the effect with IMG tags and position them above everything with z-index and in the bottom corner with a variation of this technique: http://www.alistapart.com/articles/footers/

Do you want an effect like this? http://www.virtuelvis.com/gallery/opaci … ydemo.html (Look at it in Mozilla/Firefox/Opera 7)
Compare the page with the screenshot without transparency.

View the source to see how he did it, then experiment with the DirectX filters above if you want it to look transparent in IE 5.5+.

Or read this page for another JavaScript-based technique that should validate:
http://www.alistapart.com/articles/pngopacity/

Hmm cool. Yeah, that makes sense. I'll try experimenting with it and get back to you on that one.

Anyone have any success yet?

I have been working on this for a while now, and recently, I have been getting a parsing error with a png image. Strange....

Use Sleight from http://youngpup.net