CSS opacity statements seem to strip PNG opacity values. Any way to circumvent?

I noticed it's apparently impossible to make a PNG (with various levels of
opacity) semi-transparent via the usual channels, listed below :

filter: progidXImageTransform.Microsoft.Alpha(opacity=75 );
opacity: 0.75;
-moz-opacity: 0.75;

This trio of CSS statements did a pretty good job of covering all the usual
bases when it came to making an image partially transparent. However, as
mentioned above, it seems to force all of the pixels in the PNG to be
exactly *that* transparent (in this case, 75%).

So if your PNG is a gradient that goes from 100% opaque to 0% gracefully,
applying the above statements to it will cause it to appear to become
opaque, as the alpha information is stripped and replaced with "75%" across
the board.

My question is... is there a way for me to make a PNG image -- one which has
various levels of opacity in it (like a gradient going from opaque to
transparent) -- semi-transparent while retaining the proportionate
individual alpha levels of each pixel?

In other words, if I want the PNG to be 75% opaque when shown in a specific
situation (like a button that will become 100% opaque on hover/mouseover),
while the more opaque pixels of the PNG remain more opaque than the more
transparent ones.

Is this at all do-able?

Hi

I'd do it using a png containing the two images one with no opacity and
another with say 50%.

The using CSS set the image to be the backgound and on the hover change the
x position of the image ie either move it up or down to show the trnasparent
image.

Suppose you could also do it with two images using two different
backgrounds.

HTH

Ian
"Mike" <mike (AT) nospam (DOT) com> wrote

I noticed it's apparently impossible to make a PNG (with various levels of
opacity) semi-transparent via the usual channels, listed below :

filter: progidXImageTransform.Microsoft.Alpha(opacity=75 );
opacity: 0.75;
-moz-opacity: 0.75;

This trio of CSS statements did a pretty good job of covering all the
usual bases when it came to making an image partially transparent.
However, as mentioned above, it seems to force all of the pixels in the
PNG to be exactly *that* transparent (in this case, 75%).

So if your PNG is a gradient that goes from 100% opaque to 0% gracefully,
applying the above statements to it will cause it to appear to become
opaque, as the alpha information is stripped and replaced with "75%"
across the board.

My question is... is there a way for me to make a PNG image -- one which
has various levels of opacity in it (like a gradient going from opaque to
transparent) -- semi-transparent while retaining the proportionate
individual alpha levels of each pixel?

In other words, if I want the PNG to be 75% opaque when shown in a
specific situation (like a button that will become 100% opaque on
hover/mouseover), while the more opaque pixels of the PNG remain more
opaque than the more transparent ones.

Is this at all do-able?

Good idea, although that would double the number of images. And given then
they're all PNGs, I'd rather avoid it if at all possible.

Looks like I won't be able to, though. Seems an image swap is the only way
around this.

"Ian Edwards" <i.edwards (AT) nospamedwards-micros (DOT) co.uk> wrote

Hi

I'd do it using a png containing the two images one with no opacity and
another with say 50%.

The using CSS set the image to be the backgound and on the hover change
the x position of the image ie either move it up or down to show the
trnasparent image.

Suppose you could also do it with two images using two different
backgrounds.

HTH

Hi

why use png is size is an issue? If you prepared the images in
fireworks/xara or photoshop you could always try to export in Gif, ok the
colour depth is not a good but is the definition you get on a b utton
sufficient to justify the png format?

HTH
Ian
"Mike" <mike (AT) nospam (DOT) com> wrote

Good idea, although that would double the number of images. And given then
they're all PNGs, I'd rather avoid it if at all possible.

Looks like I won't be able to, though. Seems an image swap is the only way
around this.

"Ian Edwards" <i.edwards (AT) nospamedwards-micros (DOT) co.uk> wrote in message
news:g8saq9$3jq$1 (AT) forums (DOT) macromedia.com...
Hi

I'd do it using a png containing the two images one with no opacity and
another with say 50%.

The using CSS set the image to be the backgound and on the hover change
the x position of the image ie either move it up or down to show the
trnasparent image.

Suppose you could also do it with two images using two different
backgrounds.

HTH

..oO(Ian Edwards)

why use png is size is an issue? If you prepared the images in
fireworks/xara or photoshop you could always try to export in Gif

Why use an outdated format anymore? PNG is much better than GIF.

ok the
colour depth is not a good but is the definition you get on a b utton
sufficient to justify the png format?

He asked for alpha transparency.

Micha

..oO(Mike)

Good idea, although that would double the number of images.

Not necessarily. You can keep multiple images in the same file and use
different CSS background positions to show them. Ian already suggested
it, here are actual examples of that technique:

http://wellstyled.com/css-nopreload-rollovers.html
http://www.alistapart.com/articles/sprites/

Micha

"Michael Fesser" <netizen (AT) gmx (DOT) de> wrote

.oO(Mike)

Good idea, although that would double the number of images.

Not necessarily. You can keep multiple images in the same file and use
different CSS background positions to show them. Ian already suggested
it, here are actual examples of that technique:

http://wellstyled.com/css-nopreload-rollovers.html
http://www.alistapart.com/articles/sprites/

Micha

Granted, but the amount of data being transfered is the same as if I'd
doubled the number of images.

All I'm looking to do, really, is have a PNG with a slight shadow effect
(thus, various levels of opacity in the same image) display in a 90% opaque
natural state, then switch to 100% opaque on mouseover.

For example :

a {
filter:alpha(opacity=90);
-moz-opacity:0.9;
-khtml-opacity: 0.9;
opacity: 0.9;
}

a:hover {
filter:alpha(opacity=100);
-moz-opacity:1;
-khtml-opacity: 1;
opacity: 1;
}

90% is just subtle enough to not make the image pale, but stil give you a
"light up" effect on mouseover.

In Firefox, no problem. CSS's 90% opacity attribute will make each pixel in
the PNG *proportionately* more transparent (by 10%). In other words, opaque
pixels become a bit transparent, while already-transparent pixels become
even MORE transparent. So to the viewer, the entire image simply became a
bit more transparent.

But in IE -- even IE7 -- the behavior is completely different. IE will set
ALL the pixels in the PNG (regardless of how transparent or opaque they are)
to the value set by the attribute. In this case, all pixels become exactly
90% opaque, equally, across the board, as if the PNG was a flat opaque
document to begin with (which it wasn't... it had various levels of opacity
within the same image).

This means that you can't use PNG to do a traditional a:hover opacity
effect, unless the PNG had no transparency in it to begin with (in which
case you'd probably use JPG instead).

I've scoured the web for a possible hack around this limitation, but not
only did I not find one, I didn't find a single mention of this behavior in
*any* of the PNG transparency primers, tutorials and blogs that I've found.

If I could at least find someone who so much as NOTICED this problem before,
I'd feel a little less crazy. :-)