IE6兼容的透明背景的和解决方案
JS代码:
$(函数(){())
1,通过公共类
dd_belatedpng.fix(。PngFix。pngfix:悬停);
2,直接选择器:类名,id,标签
dd_belatedpng.fix(。Imgpng,IMG );
});
HTML代码:
dd_belatedpng透明背景下实现IE6
1。通过公开课pngfix
在window.onload =函数(){
dd_belatedpng.fix(。PngFix。pngfix:悬停);
}
2,直接使用选择器:类名、id、标签实现
dd_belatedpng.fix(。Imgpng,IMG );
CSS代码:
。含有{宽度:1000px;身高:300px;保证金:0汽车;背景:# FFF;}
。contain.con {宽度:400px;浮动:左;}
。包含H1 {字体大小:18px;颜色:# 333;margin-bottom: 10px;}
。含有H2 {字体大小:16px;颜色:# 333;}
。imgpng {宽度:200px;身高:150px;背景:URL( / / /内容IMG IE6 PNG);}
在IE6的透明图片并不能解决透明显示
有一些图片浏览器的兼容性,和透明图像在IE6是不透明的,例如:
在IE6的影响
正常显示效果
在上述情况下,只需在代码中添加以下部分代码即可解决问题。
correctpng()函数
{
对于(var i = 0;i < document.images.length;i++)
{
VaR img =文档图像{我}。
无功imgname = img.src.touppercase()
如果(imgname.substring(imgname.length-3,imgname。长度)= =PNG)
{
VAR imgid =(IMG。ID)id=++ img.id
无功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
无功strnewhtml =
img.outerhtml = strnewhtml
我= 1.
}
}
}
CorrectPNG();
ie6png透明溶液
1。使用过滤器代码:
#照片
{
背景:URL(..)不重复;
以下为PNG / * * /透明代码设置IE6
_background:无;
_filter:ProgID:DXImageTransform.Microsoft.AlphaImageLoader(src=图像/罗。png);
}
提示:如果需要悬停来支持链接,则需要在CSS中定义:光标,指针,所以它会出现手动形状,否则将是默认的鼠标状态。
优势uff1a
1、绿色无插件;
2。效率高,速度快。
3,当网络速度慢时,它不会出现在灰度底和透明状态下,支持远程图像;
4、支持伪类(如悬停),但如果使用两个图片,慢速将导致第二张图片暂时无法显示,因为它没有完全加载。
缺点:
1、不支持瓦,尽管滤波器具有sizingmethod =规模
2、不支持img标签;
3,不支持CSS精灵;
使用:
1、当没有IMG介绍PNG,可以考虑;
2,当没有CSS精灵的要求时,可以考虑;
三.当不需要一套公寓时,可以考虑。
二,使用js解决IMG HTML(PNG图像插入网页)的PNG灰色问题
插入一段JS在页面的原理是相似的,只是更换img标签与标签,并通过过滤设置标签的背景。它将处理所有插入PNG。
correctpng()函数
{
对于(var i = 0;i < document.images.length;i++)
{
VaR img =文档图像{我};
无功imgname = img.src.touppercase();
如果(imgname.substring(imgname.length-3,imgname。长度)= =PNG)
{
VAR imgid =(IMG。ID)id=++ img.id ;
无功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;
无功strnewhtml =<跨度+任务+ imgclass + imgtitle +风格= +宽度+ img.width +PX;高度:+ img.height +;+;
+ 过滤:ProgID:dximagetransform。微软。AlphaImageLoader+(src=++ img.src,sizingmethod =规模');>;
img.outerhtml = strnewhtml;
我= 1.;
}
}
}
window.attachevent(onload
三、dd_belatedpng.js文件
1、JS文件的介绍,也因为这个JS是唯一有用的使用IE6的时候,为了使我们的网页更高效的执行力,我们可以修改上面代码如下:当IE6只是称,执行Javascript。
2。调用函数并设置以下参数:
复制代码代码如下所示:
dd_belatedpng.fix(# pngimg,#图片,# picsrepeat );
传入的参数是用于所使用的PNG图像的标签的ID、类样式和标签名称,也可以写在下面。
复制代码代码如下所示:
dd_belatedpng.fix(# contentimg );
这个规则表明在#内容所有img标签是透明的
如果您想为链接和链接设置透明悬停,可以按以下方式编写,在某些版本中,您不能添加:悬停可以直接编写选择器,但为了保险,我们建议添加悬停:
复制代码代码如下所示:
dd_belatedpng.fix(#链接,#链接:悬停);
Wrote here and you have used jQuery or CSSQuery library, so you must be familiar with the above method, anyway, in CSS you is how to choose the elements, then in the JS function (method) in the introduction of what, but multiple choice, which can be separated by commas.
提示:如果有很多的PNG,dd_belatedpng.fix()的页面,不是很长的函数的参数我们可以用这种写作方法:
复制代码代码如下所示:
dd_belatedpng.fix(。PngFix。pngfix:悬停);
如果我们用上述的写作方法,我们只需要添加pngfix 对我们的HTML标签对应的类=。如果有多个类风格,我们可以class=ABC CBC pngfix按照通常的多类风格。
当我们使用这个方法时,我们每次加载两个js文件或者写两个标记。这不是很好。如果HTTP请求的增加,那么我们可以打开dd_belatedpng.js文件最后添加以下代码。
然后:
窗口的指针()函数。
{
dd_belatedpng.fix(。PngFix。pngfix:悬停);
}
所以我们只需要将这个JS,添加class=pngfix 上的透明标签,简单,方便快捷!
优势uff1a
1、CSS代码无需任何修改,按照通常的思维方式编写。
2。不需要配置。
三.没有多余的GIF图片。
4、支持img;
5,支撑公寓;
6,支持CSS精灵;
7、支持悬停和其他伪类;
缺点:
1、添加JS文件(6.39k)和HTTP请求,可以忽略。
2,在文件加载之前,灰将暂时呈现。
3,当js文件太多时,可能是错误的,导致js不能正常运行(这种情况非常少,可以忽略)。
以上是IE6兼容的透明背景的图片和方案的全部内容,希望对你有帮助。