Alpha channel filter in CSS buttons

[Glom]

I discovered the alpha channel filter not two days ago and I have to say it is really cool. I have used it for my browser homepage. This page is simply a document on my hard drive that has links to my commonly used websites. Simply images in links jobby. I applied an alpha filter with 55% opacity to the basic element with it switching to style 2 (100-70) when hovering. With images that have a lot of white in them against a background which is very black. It has this cool light bulb effect.Now here's the point. I'm thinking of how to introduce this into my website. There my buttons are done using containers and CSS. The image for a button is the background to the container with the hyperlink in it. I did it this way because, not knowing about these filters at the time, I wanted to have the links respond to hovering without having to use javascript. So I created two versions of the image. A natural one and a highlighted one for hovering. The highlight was done in various ways using what limited array of picture software I have available to me.The light bulb effect on alpha filter looks better though. But I could replicate the effect by simply taking a screen dump of a test page and using that as the highlighted image. This benefit of this would be to get around the issue of lack of support for this attribute in some areas. If I go with the filter, then if a browser doesn't support it, the button will be static.Which is a better idea?

[ctoz]

If I go with the filter, then if a browser doesn't support it, the button will be static.

You can do cross-browser opacity with css: see, for examplecss for opacity but you can't directly apply it to a background-image.So your alternative, apart from the two-image solution which is fine, would be to incorporate the link text in the image itself.