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

Question

I noticed it's apparently impossible to make a PNG (with
various levels of
opacity) semi-transparent via the usual channels, listed
below :
filter: progid:DXImageTransform.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?

Answer 1

"Michael Fesser" <[email protected]> wrote in message
news:[email protected]...
> .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. :-)