by zhangxinxu 2009-08-21 20:11

jQuery与IE6下png背景透明

IE6下未透明处理图片
这里的png图片并没有接受jQuery的png透明js的透明处理,可以在IE6浏览器下看到透明部分显示为蓝蓝的背景色。
此图片属于对照图片,与下面的接受透明处理的图片做对比用,用于测试此jQuery透明插件的效用。
img标签背景透明
这里的图片使用的是img标签,用src链接图片路径。如果当前浏览器为IE6浏览器,或使用内核为IE6的浏览器,则在页面载入的过程中或许可以看到蓝背景消失。
<img class="zxx_test_png" src="../image/png_test.png" />
background-image背景透明
background-image背景图片为含有透明背景或半透明的png图片时的透明处理。
png背景是透明了,但同时也带来了另外的问题,那就是background-position定位失效,无论你设置什么值,都是左上角定位(即background-position:0 0;)。所以无法应用css sprite。
<img width="128" height="128" class="zxx_test_png" src="../image/pixel.gif" style="background-image:url(../image/png_test.png);" />
type类型为image的input框
这里的表现是让人惊喜的。其透明原理与上面稍有差异,这里调用了一个透明的gif图片,需要定高度和宽度(否则显示的高宽似乎是透明gif图片的默认高宽)。说惊喜是js对image类型的input没有造成任何影响。而image类型的input与img标签的图片差异仅仅在于前者默认鼠标手型,单击含有默认的表单提交事件,其他几乎所有属性都与img标签一致。所以如果透明对img产生什么影响的话可以试试image类型的input框,说不定可以实现您想要的效果。
<input class="zxx_test_png" type="image" src="../image/png_test.png" width="128" height="128" />