Alpha transparency

[chaitanya]

Hi,

Does IE support Alpha-transparency 'or' is there some way to achieve a similar effect..?

My actual requirement is that i need a color/image with alpha-transparency (such that u can peep through it & view the background content), which works on IE(both windows & Mac)

---Chaitanya

[MonkeeSage]

Using CSS you can accomplish this:

filter: alpha(opacity=50); /*IE */
-moz-opacity: 0.50; /* Mozilla*/

Jordan

[limbo]

Chaitanya

Do you have access to Fireworks?

To acheive the effect I think you are talking about you can draw the image you need to 'peep through' on a transparent background, export as a Gif with the alpha transparency attribute applied. I know this works on IE 5, 5.5 and 6.

Ta

Limbo

[edited by: limbo at 3:43 pm (utc) on Sep. 1, 2003]

[Ryan8720]

No, IE doesn't support alpha transparency. However there is a petition you can sign to try to encourage MS to add it in IE7. [petitiononline.com...]

The good news is that this article will help you achieve what you want. [alistapart.com...]

[MonkeeSage]

Well, this works fine in IE and Mozilla,

img {
filter: alpha(opacity=50);
-moz-opacity: 0.50;
}

<img src="blah.png" width="20" height="20"/>

opacity=n
where n is from 0 to 100

-moz-opacity: n
where n is from 0.00 to 1.00

Jordan

[kingkelly]

IE does support alpha transparency, but only in 1 level (like a gif). It cannot support all 256 layers of transparency like in PNGs. If you want it to be just a bit transparent, try that MonkeySage stuff...

[MonkeeSage]

It is not my stuff, it is IE's built in CSS filter system. And it supports from 0% to 100% alpha transparency on any type of HTML element, including images -- all kinds of images -- including png. Same for the custom Mozilla attribute. Why not try it before you (wrongly) claim it doesn't work or is somehow limited?

Jordan

[kingkelly]

Doesnt that just fade the image? You can save PNGs with all their layers of transparency for smooth transparent results but doesnt show in IE (on windows).

[MonkeeSage]

I'm not sure what you mean? AFAIK, no browsers can add layers to images, that requires am image editor. What the CSS I posted does is sets the opacity of an HTML element by adjusting it's alpha channel. It allows for 0% opacity (totally transparent) all the way to 100% opacity (no difference from the regular element). If you apply it to an image element you'll be able to see through it and see any elements, text, &c. that are behind it, more or less, depending on how you adjust the opacity.

Jordan

[Asandir]

It's my understanding that gif allow transparency as ON or OFF.... wheras png can have a varying level of transparency PER PIXEL...?

[TGecho]

That's right, some pixels can be 50%, some can be 25%, etc...

[chaitanya]

thanx for the replies..

limbo, does ur suggestion work on IE on Mac?..

--Chaitanya.K

[limbo]

Chaitanya

limbo, does ur suggestion work on IE on Mac?..

I am not sure that the alpha transparancy will work cross platform - AFAIK apple had the same level of IE integration as windows.

try posting your question here [webmasterworld.com]

Ta

Limbo

[MonkeeSage]

"My actual requirement is that i need a color/image with alpha-transparency (such that u can peep through it & view the background content), which works on IE(both windows & Mac)"

Is this what is needed or not? Am I misunderstanding?

Jordan