PNG in Windows IE-png透明功能扩展
FontSize:
- + Date: 2008年2月9日
摘要：
png图片透明一直是一个问题，在IE7以前的版本中，IE都存在问题，如果做成图片放在页面，在透明的地方会成为灰色的部分。这个pngfix，写成一个js方便实用。
资料来源：网络文/佚名
png图片透明一直是一个问题，在IE7以前的版本中，IE都存在问题，如果做成图片放在页面，在透明的地方会成为灰色的部分。这个pngfix，写成一个js方便实用。这里解决的是png图片的透明问题，其实如果放置为css中做为png背景，这又得使用另一种方法实现了，可以看我的另一篇《让png背景图片透明成为可能》
提示：您可以先修改部分代码再运行
The JS code can be seen if you do a "View Source" on the Solution page. There are two ways to use it - simple copy & paste or the JS include file method. Note that you must have height and width attributes specified for each image. Other attributes (class, alt, title & style) are optional so far as this routine is concerned, but are respected if specified.
There is also an imagemap version if you want to use imagemaps and/or form input images and a rollover version which enables the use of transparent PNGs in rollovers.
Method 1: Copy & Paste
For single page or occasional usage, copy the JS code in its entirety (from <!--[if lt IE 7]> to <![endif]-->) and paste it into your page somewhere in the the <head> section. That's it.
Method 2: (recommended) JS Include File
If you wish to use the code on multiples of pages, you may prefer to use a JS include file. First, download the JS file here: pngfix.js. Place the file in your webpage directory, then add the following construct on each of your pages somewhere in the <head> section:
<!--[if lt IE 7.]><script defer type="text/javascript" src="pngfix.js"></script><![endif]-->
Note the use of the defer keyword. This trick causes the images to be replaced before they are rendered. Earlier versions of this script did not use this method, occasionally resulting in an unpleasant screen flicker as the PNGs were being filtered. The code in the include file is slightly different from the copy and paste code referred to above, so I recommend downloading my file rather than making your own.
Here is a demo page using the Include file method. This method is arguably better for use with multiples of pages, as it only requires three lines of code per page. The JS file is only 2KB in size and will be cached after the first download. It will therefore incur no further download overhead on subsequent pages. The download time should be around 0.3 seconds on an average 48kbps dial-up modem connection.
download the JS file here: pngfix.js.
Here is a demo page
版权声明：本文属转载作品，版权属原作者所有。
本文链接地址：http://www.demoseo.com/web/pngfix/
如果你也喜欢本文，记得顶一下，支持我。你的支持是我继续发好文章的最大动力！谢谢！
Other Articles
Comments
Leave a Comment
◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。
