`
hsys
  • 浏览: 291017 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

JS解决PNG图片在IE6下不透明的问题

阅读更多

可恶的IE6,各种阻碍,各种难,中国还是IE6消亡最大的障碍,真实郁闷啊。



/*************************IE6 PNG透明***************************/
function correctPNG()
{
	for(var i=0; i<document.images.length; i++)
	{
		var img = document.images[i];
		var imgName = img.src.toUpperCase();
		if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
		{
			var imgID = (img.id) ? "id='" + img.id + "' " : "";
			var imgClass = (img.className) ? "class='" + img.className + "' " : "";
			var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' ";
			var imgStyle = "display:inline-block;" + img.style.cssText;
			if (img.align == "left") imgStyle = "float:left;" + imgStyle;
			if (img.align == "right") imgStyle = "float:right;" + imgStyle;
			if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle ;
			var strNewHTML = "<span " + imgID + imgClass + imgTitle
			+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
			+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
			+ "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>";
			img.outerHTML = strNewHTML;
			i = i-1;
		}
	}
}
function alphaBackgrounds(){
	var rslt = navigator.appVersion.match(/MSIE (d+.d+)/, '');
	var itsAllGood = (rslt != null && Number(rslt[1]) >= 5.5);
	for (i=0; i<document.all.length; i++){
		var bg = document.all[i].currentStyle.backgroundImage;
		if (bg){
			if (bg.match(/.png/i) != null){
				var mypng = bg.substring(5,bg.length-2);
				document.all[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+mypng+"', sizingMethod='crop')";
				document.all[i].style.backgroundImage = "url('')";
			} 
		}
	}
}



引入以上的代码,在需要透明的页面上加上一下代码


if (navigator.platform == "Win32" && navigator.appName == "Microsoft Internet Explorer" && window.attachEvent) {
	window.attachEvent("onload", correctPNG);
	window.attachEvent("onload", alphaBackgrounds);
}






分享到:
评论

相关推荐

    解决PNG图片在IE6中背景不透明方法

    PNG(Portable Network Graphics)是一种无损压缩的位图...`clear_png.js`是众多解决方案之一,它利用JavaScript和CSS滤镜技术,为开发者提供了一种简单易用的途径,使PNG图片在古老的IE6中也能展现出应有的透明效果。

    解决PNG图片在IE6下背景不透明的问题

    总的来说,解决IE6下PNG图片背景不透明的问题需要对CSS滤镜有深入的理解,并且要灵活应对可能出现的各种兼容性问题。在现代浏览器广泛使用的今天,虽然IE6的问题逐渐减少,但了解这些历史遗留问题可以帮助我们更好地...

    js_IE6支持png透明解决png_ie6下不透明背景图片

    本文将深入探讨这个问题,并提供JavaScript解决方案来实现IE6下PNG图片的透明显示。 首先,我们需要理解为什么IE6不支持PNG透明。PNG-24格式允许半透明和全透明效果,但IE6只支持8位的PNG-8,而这种格式最多只能有...

    解决png格式的图片在IE6下不透明

    2. **JavaScript库**:有一些JavaScript库,如DD_belatedPNG,专门用于解决IE6下的PNG透明问题。它们通过动态创建VML(Vector Markup Language)元素并应用到PNG图片上,从而实现透明效果。只需引入这个库,然后在...

    解决IE6下PNG图片背景色不透明问题的方法

    本文将详细介绍如何解决IE6下的PNG图片背景色不透明问题。 首先,理解问题的原因至关重要。IE6不完全支持PNG8和PNG24这两种PNG格式。特别是PNG24,它包含了24位颜色和一个alpha通道,用于实现半透明效果,但IE6只能...

    jquery 解决png ie6不透明

    然而,一个众所周知的问题是,Internet Explorer 6(简称IE6)浏览器对PNG-24格式的图片支持不足,导致图片在IE6下显示为不透明或半透明效果。这在设计美观且交互丰富的网站时构成了一个挑战。jQuery,作为一个强大...

    解决IE6下PNG不透明的JS代码

    本话题将详细讨论如何使用JavaScript来解决IE6下的PNG不透明问题,以及相关的技术原理和代码实现。 首先,我们需要理解问题的根源。IE6不支持PNG-24(包含Alpha通道,用于实现半透明)的透明特性,但支持PNG-8(8位...

    解决ie6下透明图片不透明问题

    它由Dean Edwards编写,通过JavaScript模拟实现了PNG透明效果,从而使得在IE6下,透明PNG图片也能正常显示。这个库的工作原理是检测浏览器类型,如果检测到是IE6,它会为页面上的所有PNG图片应用特定的样式和脚本,...

    如何解决IE6下png不透明

    总之,了解并解决IE6下的PNG透明问题,对于前端开发者来说是一项重要的历史技能,它体现了浏览器兼容性和JavaScript解决问题的能力。随着技术的发展,这些问题逐渐被新的技术和标准所取代,但了解这些历史问题可以...

    ie6下png图片问题

    综上所述,解决IE6下的PNG图片不透明问题需要结合CSS、JavaScript和网页设计策略。选择合适的方法取决于项目需求、用户群体以及对浏览器兼容性的重视程度。对于现代网站,虽然IE6的使用率已经极低,但了解并解决这类...

    实现PNG图片在IE6下的背景透明

    要解决“PNG图片在IE6下的背景透明”问题,有几种常见的方法: 1. **CSS滤镜方法**:IE6支持CSS滤镜,可以利用它来实现PNG的透明效果。例如,对于一个ID为"imgId"的PNG图片,可以添加以下CSS样式: ```css #imgId...

    js修复IE不能显示PNG图片透明背景的方法

    尽管PNG格式拥有诸多优点,但在早期版本的Internet Explorer(IE)浏览器中存在一个显著的问题:即不支持PNG格式图片的透明背景功能。具体来说,在IE 7及以下版本中,PNG图片无法正常显示其透明背景,而是呈现出一种...

    DD_belatedPNG.js解决IE6浏览器下的PNG透明图片显示问题

    这主要源于IE6不支持PNG8以上的Alpha透明度,导致透明PNG图片在该浏览器下显示为黑色背景或者完全不透明。为了解决这个问题,开发者们创造了一种名为“DD_belatedPNG”的JavaScript库,它通过JavaScript模拟了PNG...

    完美解决png在ie6兼容问题完整示例

    为了解决这个问题,开发者通常会利用JavaScript或者特定的CSS技巧来实现PNG在IE6下的正常显示。以下是一个详细的知识点讲解: 1. **PNG图像格式**:PNG(Portable Network Graphics)是一种无损压缩的位图格式,...

    IE 6 下PNG图片实现透明

    PNG(Portable Network Graphics)是一种无损压缩的位图格式,支持透明度,广泛应用于网页设计。然而,Internet Explorer 6...在实际应用中,结合条件注释、CSS滤镜和JavaScript库,可以有效地解决IE6下的PNG透明问题。

    ie6中png透明解决方案 js

    以上两种方法都可以有效解决IE6下PNG图片透明度的问题,但在实际应用中,考虑到IE6的市场份额逐渐减少,开发者也可能选择仅对现代浏览器提供PNG透明效果,而让IE6用户看到不透明的图片。 这个压缩包中的"ie6中png...

    IE6下完美解决png图片半透明问题

    标题"IE6下完美解决png图片半透明问题"所指的,就是针对这个特定的IE6浏览器与PNG图像的兼容性问题,寻找并应用一种方法来实现PNG图像在IE6中的正常显示,包括其半透明特性。解决这个问题通常涉及到CSS滤镜(Filter...

    解决ie6 PNG透明问题——两种方法都好用哦

    本文将详细介绍两种有效解决IE6下PNG图片透明显示问题的方法。 #### 方法一:使用 CSS Hack ##### 原理 这种方法利用了IE6的一个特性,即它会解析特定的HTML注释,并执行其中的JavaScript代码。通过这种方式,我们...

    IE6png透明JS

    为了解决这个问题,开发者们开发了一系列JavaScript库和技巧,使得在IE6下也能实现PNG图像的透明效果。 1. **Alpha Image Loader滤镜**:IE6提供了一个名为"Alpha Image Loader"的滤镜,可以通过CSS样式应用到元素...

    解决png格式图片在IE6无法透明的js文件及示例

    为了解决这个问题,开发者创建了JavaScript解决方案,使得PNG图片在IE6中也能实现透明效果。本压缩包中包含两个JS文件,一个用于开发阶段,一个用于生产环境,这通常意味着开发版本可能包含更多的调试信息,而生产...

Global site tag (gtag.js) - Google Analytics