tags:

views:

760

answers:

3

i'm trying to add alpha effect for my image. the image is in rounded corner rectangular shape. i know there is attributes to change the alpha in CSS3, but i'm trying to be compliant with the w3c standard, which is still CSS2.

Sorry i didn't state my question correctly ealier. i was trying to change the alpha when i hover over the image using CSS2. i'm thinking to use the "background-image" for 100% alpha, and use the img tag for the 50% alpha. is there any better way to do this?

+2  A: 

If the image is a PNG, you can include alpha directly in the image. Of course this would require the PNG Fix script for IE6.

Otherwise, you can use CSS to set the transparency.

Edit: Updated to only work on hover, note that this won't work in IE6.

img.transparent{
    filter: alpha(opacity=100); /* internet explorer */
    opacity: 1;           /* fx, safari, opera, chrome */
}

img.transparent:hover {
    filter: alpha(opacity=50); /* internet explorer */
    opacity: 0.5;           /* fx, safari, opera, chrome */
}
tj111
The advice about PNG and IE6 is really only required when dealing with PNG-24 files - IE6 supports PNG-8 files with transparency just fine.
Redbeard 0x0A
By the way, opacity: 0.5; works in IE8, you don't need the -ms-filter style - Browser Mode: IE8, Document Mode: IE8 Standards.
Redbeard 0x0A
i know i can use filter and opacity, but they are for css3 only. i'm trying to use css2 still because i want to get it validated for w3c
fei
A: 

The typical way a web developer implements the transparent effects is using a partially transparent PNG file as a background.

div {
  background: #FFF url(img/bg.png) repeat top left;
}

Using the png will work as you would expect, however opacity doesn't work as expected:

div {
  filter: alpha(opacity=50); /* IE */
  -moz-opacity: 0.5; /* Firefox */
  -webkit-opacity: 0.5; /* Older Safari, Webkit */
  opacity: 0.5; /* CSS Standard - Always last in the list */
}

This will make DIV 50% transparent, including all of its children, text and all. You will really need to play around with the opacity settings to make sure you get results as you would expect.

Redbeard 0x0A
A: 

An even simpler fix, if you can stand a slightly worse user experience for IE6, is to use an alpha-transparent image for all modern browsers, and send an image with no transparency (or just one-color) to IE6. Looks a little worse for those few users, but is a lot less code to maintain.

Emil Stenström