Welcome to WebmasterWorld Guest from 35.172.195.49

Forum Moderators: not2easy

Message Too Old, No Replies

Alpha transparency

     
12:21 pm on Sep 1, 2003 (gmt 0)

New User

10+ Year Member

joined:July 22, 2003
posts:12
votes: 0


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

12:44 pm on Sept 1, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:July 26, 2003
posts:881
votes: 0


Using CSS you can accomplish this:

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

Jordan

1:14 pm on Sept 1, 2003 (gmt 0)

Senior Member from GB 

WebmasterWorld Senior Member 10+ Year Member

joined:Oct 4, 2002
posts:2204
votes: 0


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]

1:36 pm on Sept 1, 2003 (gmt 0)

Junior Member

10+ Year Member

joined:Aug 3, 2003
posts:161
votes: 0


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...]

1:42 pm on Sept 1, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:July 26, 2003
posts:881
votes: 0


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

3:36 pm on Sept 1, 2003 (gmt 0)

Full Member

10+ Year Member

joined:July 8, 2001
posts:267
votes: 0


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...
3:42 pm on Sept 1, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:July 26, 2003
posts:881
votes: 0


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

10:11 pm on Sept 1, 2003 (gmt 0)

Full Member

10+ Year Member

joined:July 8, 2001
posts:267
votes: 0


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).
11:03 pm on Sept 1, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:July 26, 2003
posts:881
votes: 0


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

1:24 am on Sept 2, 2003 (gmt 0)

Junior Member

10+ Year Member

joined:Oct 8, 2002
posts:65
votes: 0


It's my understanding that gif allow transparency as ON or OFF.... wheras png can have a varying level of transparency PER PIXEL...?
2:26 am on Sept 2, 2003 (gmt 0)

Preferred Member

10+ Year Member

joined:May 24, 2003
posts:381
votes: 0


That's right, some pixels can be 50%, some can be 25%, etc...
5:13 am on Sept 2, 2003 (gmt 0)

New User

10+ Year Member

joined:July 22, 2003
posts:12
votes: 0


thanx for the replies..

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

--Chaitanya.K

2:47 pm on Sept 2, 2003 (gmt 0)

Senior Member from GB 

WebmasterWorld Senior Member 10+ Year Member

joined:Oct 4, 2002
posts:2204
votes: 0


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

4:10 pm on Sept 2, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:July 26, 2003
posts:881
votes: 0


"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