开发者

alpha transparency solution in IE

I am building a website with a TON of png-24 files that have transparent background. In IE 6 they obviously aren't displayed correctly, so I need some sort of reliable, goo开发者_开发问答d solution that will fix the PNG problem in IE and require little work and be reliable. Any good ideas?


For IE6 transparency I follow a personal flow:

1. If there is just one or two PNG images (like a logo, or a normal image) I just use filter:

#selector {background:none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='test.png', sizingMethod='crop');}

Problems: If applied to a link, it will no longer be clickable. Possibly apply to the h1#logo and have the a be transparent.

2. If I have a lot of 24-bit PNG files, or special use cases (repeating background, etc), I use DD_belatedPNG

IMPORTANT FOR IE7 + IE8: You cannot animate or combine the filter:alpha (which is used for overall opacity on an element in IE and also used by jQuery to set opacity) property with 24-bit transparent PNG images. It changes it to look like 8-bit transparency, with everything that is not 100% opaque or transparent taking on a black background.


Here are a few good png fixes for ie6:

http://labs.unitinteractive.com/unitpngfix.php

http://www.twinhelix.com/css/iepngfix/


There are a lot IE PNG fixes on the net, which basically all work with the same technique. The older Internet Explorers do not support alpha in PNGs directly, but they all have a filter that does so. So writing the following code as part of a css of an object puts the image in the src to the background of the element:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png');

That way, you can easily display transparency in the Internet Explorer. However it's a lot easier to just get one of the png fix scripts (in JavaScript) and include it to your page inside of conditional comments. Then the script will make all your images working automatically.


We used Dean Edwards' IE7 for this. (So named before IE7 came out.) It's been good for that kind of thing.


There are currently many options to get this working. The standard is apply a DirectX filter through CSS to change make the PNG transparent in IE6. There are even scripts that will automatically do this when the webpage loads from an IE6 or less client.

http://www.google.com/search?btnG=1&pws=0&q=transparent+png+ie6

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜