当前位置:首页 > 日记 > 正文

IE6兼容的透明背景的和解决方案

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兼容的透明背景的图片和方案的全部内容,希望对你有帮助。

相关文章

非主流人格情绪特征非主流

非主流人格情绪特征非主流

特征,非主流,人格,情绪,电脑软件,个人签名能显示你的个性。有些人会在个人签名写自己的感受,和个人签名可以写你的个人feelings.qq个性签名是展示其个性、喜悦、愤怒、悲伤和快乐,所以叫个性签名。每个人每天、每一小时、每一分钟、每一秒都…

ppt制作过程中如何制作反射效果PPT

ppt制作过程中如何制作反射效果PPT

反射,过程中,效果,电脑软件,ppt,一般来说,在一般风景或风景图片中都有倒影。看起来感觉更像了。不,但是如果你对照片中的倒影不满意,我们也可以用PowerPoint来设计它们。今天,小编辑利用PPT在没有反射的情况下给图片添加一个反射。让我们看看它…

Javascript的自定义in_array()函数的实现方

Javascript的自定义in_array()函数的实现方

函数,方法,自定义,电脑软件,Javascript,本文介绍了Javascript的自定义in_array实施()函数。分享给你供你参考。以下是如下: 功能in_array(什么地方){ var = false; 对于(var i = 0;i 如果(= =在哪里{ }){ =真的; 打破; } } 返回一个; } 希望本文能对大家的jav…

非主流网络签名非主流

非主流网络签名非主流

网络,非主流,电脑软件,个人签名能显示你的个性。有些人会在个人签名写自己的感受,和个人签名可以写你的个人feelings.qq个性签名是展示其个性、喜悦、愤怒、悲伤和快乐,所以叫个性签名。每个人每天、每一小时、每一分钟、每一秒都有不同的心…

Word2007打开兼容模式技术Word2007

Word2007打开兼容模式技术Word2007

教程,兼容模式,技术,电脑软件,当你创建一个新文档,将被用于在一个更早的版本,你可以将文件保存为Word 97-2003格式打开兼容模式。 1。打开新文档。 2,单击Office按钮,然后单击保存;。 三.在保存类型;;在列表中选择;Word97-2003文档; 4,在文件名框…

如何解决Word文档不能显示的问题。

如何解决Word文档不能显示的问题。

显示,文档,如何解决,电脑软件,Word,1,可能是由于在公共视图或大纲视图中工作。解决方案:在打印页面中查看页眉、页脚或图形对象的位置,切换到页面视图。 2,屏幕上的显示可能是链接的嵌入式图形的域代码。域代码是包含在指令字符域({ })。解决方法…

如何使用PS图象处理软件的阴影/高

如何使用PS图象处理软件的阴影/高

命令,如何使用,图象,处理软件,电脑软件,由于曝光过度或不足,一些地区会有一些图像的缺陷,使用PS图象处理软件CS新影/光(阴影/高亮)功能可以提高图像的对比度,同时保持画面的整体平衡,使图像更加完美。因此PS图象处理软件阴影/高光命令的使用让我…

数组权重删除方法

数组权重删除方法

删除,权重,数组,方法,电脑软件,三方法 使用索引来判断一个新的数组 一个类似的指标实际上是用于Underscore.js 输入数组 功能unique1(ARR){ 无功tmparr = { }; 对于(var i = 0;i 如果当前数组已保存到临时数组中,则跳过, 否则将推送到临时数组…

ps如何修改大小PS修改大小的方法图

ps如何修改大小PS修改大小的方法图

修改,方法,大小,电脑软件,ps,ps如何修改图片的大小可能对新手不太熟悉。今天,萧边教你修改PS的大小的方法。让我们看一看。 PS如何修改图片的大小很多朋友认为使用PS图象处理软件图片处理的专业人士。其实,这不是一个简单的操作与PS图象处理…

excel如何在页眉下添加教程excel基

excel如何在页眉下添加教程excel基

页眉,教程,如何在,基础教程,电脑软件,在Excel中添加到工作表中的背景在整个工作表中排列。它只能在桌子的顶部吗 1、执行格式具有;表RARR;背景命令,打开工作表背景;;对话框,选择图片需要背景,按下插入按钮,将图片,整个工作表下。 2。按住Ctrl键时,鼠…

如何excel2010自动备份excel2010教

如何excel2010自动备份excel2010教

教程,自动备份,电脑软件,在excel2010运行事故总是难以避免。如何最大限度地减少用户流失已成为Office 2010发展的重点。 自动保存文档未保存;听起来是不是有些绕嘴,但事实上它的Office 2010在事故的保护是一个重大的任务。相信我们每一个人都…

PS制作可爱卡通风格游戏字体

PS制作可爱卡通风格游戏字体

字体,卡通,风格,可爱,游戏,本教程是向朋友介绍PS制作游戏字体的可爱卡通风格方法。教程生成的字体非常可爱,难度也不是很大。建议你喜欢你的朋友一起学习。 以下是在PS中创建可爱卡通风格的方法,如下所示: 以上是ps制作的一个可爱的卡通风格…