by zhangxinxu 2009-08-22 23:13

JavaScript使IE6下png背景透明后对图片大小限制的影响

type类型为image的input框
此JavaScript对type为image类型的input的png背景透明并不支持,所以这里用做对照处理,表明下面的png图片受JavaScript代码影响已经背景透明。
<input class="zxx_test_png" type="image" src="../image/png_test.png" width="128" height="128" />
图片原始大小128*128
图片原始大小为128像素*128像素。右图没有对其大小做进一步的限制,为其原始大小。
<img class="zxx_test_png" src="../image/png_test.png" />
图片2倍大小256*256
这里直接将图片拉伸到256像素*256像素,可以看到,图片所占据的区域确实是256像素*256像素,但是图片却是原来的大小。这个其实不难理解,JavaScript是png图片透明其实就是应用的css png背景透明滤镜。此滤镜只针对background作用,所以对于img类型的图片就用一个透明gif图片做表层,png图片做背景了。这里就等同于'img width="256" height="256" class="zxx_test_png" src="../image/pixel.gif" style="background:url(../image/png_test.png) no-repeat;" '所实现的效果。右边的图片,如果您右键->图片另存为,会发现是pixel.gif图片,一个透明gif图片。这就证明了我的阐述,下面64像素的表现也验证了这一点。
<img width="256" height="256" class="zxx_test_png" src="../image/png_test.png" />
图片大小减半64*64
这里图片大小限制为64像素*64像素,图片占据区域是变成64像素*64像素了,但是png图片却以原始比例以背景图片的形式藏在后面。这就是我所说的JavaScript使IE6下png背景透明后对图片大小限制的失效。
<img width="64" height="64" class="zxx_test_png" src="../image/png_test.png" />
解决方法
使用jQuery png背景透明插件可以解决此问题。点击这里进入演示页面