`
sanshizi
  • 浏览: 86014 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

IE6中使用PNG, 透明

阅读更多
使用方法:
<!--[if IE 6]>
<script src="js/PNG.js"></script>
<![endif]-->



第一种方法, 基于jQuery

$("img").each(function(n){
	var img = this;
	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>";
		$(this).replaceWith(strNewHTML);
	}
});


第二种方法, 不用其他库, 但是效果不好

window.attachEvent("onload", function(){
	setTimeout(function(){
		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;
			}
		}
	},10);
});
分享到:
评论

相关推荐

    IE6不兼容png透明背景解决方法

    PNG是一种先进的位图格式,提供了24位颜色和透明度支持,但在IE6中,PNG-24格式的透明效果会呈现为灰色背景,这给网页设计带来了困扰。以下是对这个问题的深入探讨和解决方案。 首先,理解问题的根源:IE6对PNG-24...

    IE6png透明JS

    PNG(Portable Network Graphics)是一种常见的图像格式,它支持24位真彩色以及Alpha通道透明度,但在IE6中,对于带有Alpha透明度的PNG-24图像,浏览器默认无法正确显示透明效果。这个问题导致了“IE6png透明JS”这...

    IE6完美解决PNG背景透明

    虽然iepngfix.htc在某些情况下可以部分解决PNG透明问题,但确实存在一些局限性,比如无法平铺、定位困难,以及在添加了超链接的PNG图像上,点击区域可能无法正常工作。 DD_belatedPNG的优势在于,它不仅解决了iepng...

    处理ie6下png格式透明效果

    解决IE6中的PNG透明问题,主要有以下几种方法: 1. **CSS滤镜法**:利用CSS的`filter`属性,可以实现IE6对PNG24透明的支持。例如: ```css .pngFix { filter: progid:DXImageTransform.Microsoft....

    IE6下PNG透明代码

    2. **IE6的PNG透明问题**:IE6不支持PNG24的阿尔法透明,导致图片背景显示为黑色或不透明。对于PNG8,只有256色以下的颜色和单色透明可以正常显示,复杂的透明效果无法实现。 3. **JavaScript解决方案**:为了克服...

    ie6中png透明解决方案 js

    这个压缩包中的"ie6中png透明解决js"很可能包含了类似上述的JavaScript代码,用于解决IE6的PNG透明问题。为了使用这个解决方案,你需要将代码引入到你的项目中,并确保图片的路径和类名与代码相匹配。同时,为了兼容...

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

    因此,当你在IE6中使用PNG-24格式的图片时,透明部分会显示为完全不透明,即背景色或默认颜色。 为了解决这个问题,我们可以使用一种名为“PNGFix”的JavaScript库,如压缩包中的`js`文件可能就是这样一个解决方案...

    IE6下PNG背景透明的方法

    通过调整PNG图像的z-index使其位于上方,这样在IE6中看起来像是背景是透明的。这种方法适用于固定颜色背景,但不适合复杂背景。 6. **使用CSS3渐变替代PNG**:对于一些简单的透明效果,可以考虑使用CSS3的线性或...

    完美解决IE6下png透明

    但在IE6中,PNG-8(8位色)的透明效果可以正常显示,而PNG-24(24位色,支持半透明)则会出现问题。 为了解决这个问题,有以下几种常见方法: 1. **CSS滤镜法**:这是最常用的解决方式,利用CSS中的`filter`属性,...

    让 IE6 支持 PNG 透明

    - IE6浏览器使用特定的CSS滤镜属性来模拟PNG透明。例如,可以使用`filter:progid:DXImageTransform.Microsoft.AlphaImageLoader`,这个滤镜允许你指定一个图像源(通常为PNG-24图像)并设置透明度。 3. **使用.htc...

    IE6 png背景图片透明

    要解决IE6中的PNG透明问题,有几种常见的方法: 1. **CSS滤镜(Filter)**:IE6提供了一个名为`AlphaImageLoader`的滤镜,可以用来处理PNG的透明性。通过在CSS中添加如下代码,可以实现PNG图片的透明效果: ```css...

    IE低版本支持png透明问题

    另一种方法是使用JavaScript库,如PNGFix或DD_belatedPNG,这些库通过JavaScript代码自动处理页面上的PNG图片,使其在IE6中具有透明效果。 除了技术解决方案,还可以在设计阶段避免使用透明PNG,或者使用其他技术来...

    IE6 PNG 透明处理方法

    这个库通过JavaScript代码来模拟对PNG透明的支持,从而使得在IE6中可以正确显示带有透明效果的PNG图片。文件“DD_belatedPNG_0.0.8a.js”就是这个库的一个版本,它可以通过引入到HTML页面中,来为IE6提供透明PNG的...

    ie6 火狐 谷歌 png背景透明

    3. **解决IE6 PNG透明方案**:对于IE6中的PNG透明问题,有几种常见的解决方法。其中一种是使用JavaScript库,如压缩包中的`DD_belatedPNG_0.0.8a.js`。这个脚本可以修复IE6对PNG透明的支持,通过模拟PNG的alpha通道...

    IE6_PNG透明终极解决办法

    在IE6中,PNG透明问题主要体现在以下几个方面: 1. PNG8格式的图片,IE6只能正确处理索引颜色中的透明,即单一颜色的透明,无法处理复杂的半透明效果。 2. PNG24格式的图片,IE6会完全忽略Alpha透明通道,导致图片...

    IE 6 下PNG图片实现透明

    而PNG-24则可以显示更多的颜色并具有Alpha通道,能够实现不同程度的透明,但在IE6中默认是不透明的。 解决这个问题的一个常见方法是使用CSS滤镜。IE6特有的CSS滤镜属性可以用来模拟PNG-24的Alpha透明。例如,我们...

    超好用的IE6png透明JS

    PNG是一种无损压缩的位图格式,提供了24位颜色和透明度的支持,但在IE6中,PNG-24格式的图片无法实现真正的透明效果,只有PNG-8格式部分支持,这对于追求高质量和设计感的网页开发者来说是个巨大的挑战。 "超好用的...

    ie(IE) png 半透明 插件

    内含插件及使用说明 ie(IE)png半透明插件使用微软的VML语言对PNG图片进行重新绘制,以达到半透明的效果,并且能支持background-position和background-repeat属性。

    IE6中png透明效果显示

    为了解决IE6下的PNG透明问题,有几种常见的解决策略: 1. **CSS滤镜方法**:IE6特有的CSS滤镜属性可以用来模拟PNG的透明效果。可以使用`filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your...

    处理IE6浏览器显示.png图片透明度文件

    PNG(Portable Network Graphics)是一种支持透明度的图像格式,但在IE6中,它无法正确显示带有alpha透明通道的PNG-24图像,导致图片出现半透明部分变成全黑或者背景颜色无法透过,这被称为“PNG透明问题”。...

Global site tag (gtag.js) - Google Analytics