IE浏览器下的PNG相关功能

目前互联网的要求越来越高的影响,不可避免的PNG图像,PNG分为几种格式,PNG8 png32 PNG24,其中最常用的,但也表明适度的影响大小和PNG24,支持半透明,透明的,颜色也很丰富,但由于我们中国人使用IE或IE系列的大多数浏览器内核系列,在国内市场占有率的Windows XP是比较大的,而且很多人还在用XP的IE6和IE7 IE8浏览器,浏览器支持png或多或少有差距,IE6不支持PNG,IE7 IE8 PNG不完全支持,面对透明画画IE7 IE8的变化,PNG透明AR的延伸EAS哪里会有黑边,如果有透明的,半透明的区域是黑色的,因为这个页面出现是不可接受的,研究发现,PNG作为背景,与过滤器装载微软独家的图像,IE6 PNG问题可以解决不支持,也可以出现黑边解决IE7和IE8的问题后,jQuery动画透明效果的使用,代码是真的很喜欢,如下:



功能correctpng(){
无功arversion = navigator.appversion.split(MSIE)
VaR版本= parseFloat(arversion { 1 })
如果((版本= 5.5)(文件.过滤器)){
无功lee_i = 0;
无功docimgs = document.images;
对于(var j = 0;J < docimgs.length;j++){
VaR img = docimgs {,}
无功imgname = img.src.touppercase();
如果(imgname.substring(imgname.length - 3,imgname。长度)= =PNGimg.getattribute!(USEMAP)){
lee_i + +;
无功spanid = img.id + lee_i.tostring('ra_png_)| |;
无功imgdata =新的图像();
imgdata.prodata = spanid;
imgdata.onload =函数(){
$(# +本。奔腾达)Css(宽。
}
imgdata.src = img.src;
VAR imgid =id =++spanid;
无功imgclass =(IMG。className)class=++ img.classname
无功imgtitle =(IMG。标题)title=++ img.title title=+ img.alt +'
无功imgstyle =显示:内联块;+ img.style.csstext
如果(img.align = =左)imgstyle =浮动:左+ imgstyle;
如果(img.align = =右)imgstyle =浮动:右+ imgstyle;
如果(IMG。parentelement。href)imgstyle =鼠标手;+ imgstyle
Var strNewHTML = + style=++宽+ img.width +PX;高度:+ img.height +PX;+ imgstyle +;
+过滤:ProgID:dximagetransform AlphaImageLoader。微软。
(SRC = + img.src + > sizingmethod =规模');
img.outerhtml = strnewhtml;
j = J - 1;
}
}
}
}
确定 / / IE8下面除了三浏览器,浏览器不支持注册侦听器,其他浏览器没有问题
如果(typeof window.addeventlistener = =未定义类型的document.getelementsbyclassname =未定义){
window.attachevent(onload
}





在结束标签页面/体jquery1.8图书馆第一次使用,然后添加上述代码,IE6 78 PNG24表明没有问题,如果你需要进行动画的动画或图片,在IE 678 PNG发现找不到图片,或改变它的位置和透明度地图没有找到响应,原因是correctpng页面上所有PNG img标签与跨度的标签替换,然后标记跨使用过滤器:ProgID:dximagetransform.microsoft.alphaimageloader PNG图像将被加载,因此,推荐的做法是用DIV的图片,有一个img标签只允许DIV操作然后定位或div的情况下透明度:




$(#试验)。动画({不透明度:0.2,marginleft:500 },1000、函数(){ alert('run完成');});




另一种情况是,我想做透明度和位移,并改变宽度和高度的图片。




$($(#测试跨度){ 0 } | | $(#测试IMG){ 0 })。动画({不透明度:0.2,marginleft:500,宽度:'500px,身高:'500px},1000、函数());});




错误:IE7和IE8下,如果动态修改PNG图像的透明度,例如,如果你申请一个渐明,画面的透明度,将调整为25%。这时,会有非常奇怪的bug,而PNG的透明信息也不见了,它变成了一个非常丑陋的黑色!

背景发黑PNG图片背景IE7和IE8下错误解决方案:



1。不要直接改变图片的透明度,而是给图片一个容器来修改容器的透明度。

例如,原始代码是:

把它改为:

2。向容器中添加背景色



在这一步中,解决bug的关键是非常重要的,例如:


共享列表图标{
宽度:60px;身高:21px;
位置:绝对;底:8px;左:0px;Z指数:1;
保证金:0汽车;
显示块;
背景:# fafdef;
}




一般来说,bug会被解决,如果有问题,请看下面:

三.向容器中添加缩放:1



变焦的作用是什么:1IE为什么存在这个bug

这是个问题,它实际上是一个answer.ie修改透明度,而不是通过CSS属性,而是通过过滤器,因此了解这个bug,你想从过滤器找到原因。滤波器对物体的作用,物体必须有形式,它必须布局,和IE有一个非常特殊的属性:haslayout,这个属性可以使容器为布局,一些奇怪的haslayout属性,你可以直接写通过CSS的启动,必须通过Javascript开始,有一个方法可以启动,是使用CSS属性,变相haslayout启动,CSS属性是变焦(其他属性如显示:内联块,浮动:左和变焦不仅CAN,做什么副作用)

以上是本文的全部内容,希望大家能喜欢。