使用方法:
<!--[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);
});
分享到:
相关推荐
PNG是一种先进的位图格式,提供了24位颜色和透明度支持,但在IE6中,PNG-24格式的透明效果会呈现为灰色背景,这给网页设计带来了困扰。以下是对这个问题的深入探讨和解决方案。 首先,理解问题的根源:IE6对PNG-24...
PNG(Portable Network Graphics)是一种常见的图像格式,它支持24位真彩色以及Alpha通道透明度,但在IE6中,对于带有Alpha透明度的PNG-24图像,浏览器默认无法正确显示透明效果。这个问题导致了“IE6png透明JS”这...
虽然iepngfix.htc在某些情况下可以部分解决PNG透明问题,但确实存在一些局限性,比如无法平铺、定位困难,以及在添加了超链接的PNG图像上,点击区域可能无法正常工作。 DD_belatedPNG的优势在于,它不仅解决了iepng...
解决IE6中的PNG透明问题,主要有以下几种方法: 1. **CSS滤镜法**:利用CSS的`filter`属性,可以实现IE6对PNG24透明的支持。例如: ```css .pngFix { filter: progid:DXImageTransform.Microsoft....
2. **IE6的PNG透明问题**:IE6不支持PNG24的阿尔法透明,导致图片背景显示为黑色或不透明。对于PNG8,只有256色以下的颜色和单色透明可以正常显示,复杂的透明效果无法实现。 3. **JavaScript解决方案**:为了克服...
这个压缩包中的"ie6中png透明解决js"很可能包含了类似上述的JavaScript代码,用于解决IE6的PNG透明问题。为了使用这个解决方案,你需要将代码引入到你的项目中,并确保图片的路径和类名与代码相匹配。同时,为了兼容...
因此,当你在IE6中使用PNG-24格式的图片时,透明部分会显示为完全不透明,即背景色或默认颜色。 为了解决这个问题,我们可以使用一种名为“PNGFix”的JavaScript库,如压缩包中的`js`文件可能就是这样一个解决方案...
通过调整PNG图像的z-index使其位于上方,这样在IE6中看起来像是背景是透明的。这种方法适用于固定颜色背景,但不适合复杂背景。 6. **使用CSS3渐变替代PNG**:对于一些简单的透明效果,可以考虑使用CSS3的线性或...
但在IE6中,PNG-8(8位色)的透明效果可以正常显示,而PNG-24(24位色,支持半透明)则会出现问题。 为了解决这个问题,有以下几种常见方法: 1. **CSS滤镜法**:这是最常用的解决方式,利用CSS中的`filter`属性,...
- IE6浏览器使用特定的CSS滤镜属性来模拟PNG透明。例如,可以使用`filter:progid:DXImageTransform.Microsoft.AlphaImageLoader`,这个滤镜允许你指定一个图像源(通常为PNG-24图像)并设置透明度。 3. **使用.htc...
要解决IE6中的PNG透明问题,有几种常见的方法: 1. **CSS滤镜(Filter)**:IE6提供了一个名为`AlphaImageLoader`的滤镜,可以用来处理PNG的透明性。通过在CSS中添加如下代码,可以实现PNG图片的透明效果: ```css...
另一种方法是使用JavaScript库,如PNGFix或DD_belatedPNG,这些库通过JavaScript代码自动处理页面上的PNG图片,使其在IE6中具有透明效果。 除了技术解决方案,还可以在设计阶段避免使用透明PNG,或者使用其他技术来...
这个库通过JavaScript代码来模拟对PNG透明的支持,从而使得在IE6中可以正确显示带有透明效果的PNG图片。文件“DD_belatedPNG_0.0.8a.js”就是这个库的一个版本,它可以通过引入到HTML页面中,来为IE6提供透明PNG的...
3. **解决IE6 PNG透明方案**:对于IE6中的PNG透明问题,有几种常见的解决方法。其中一种是使用JavaScript库,如压缩包中的`DD_belatedPNG_0.0.8a.js`。这个脚本可以修复IE6对PNG透明的支持,通过模拟PNG的alpha通道...
在IE6中,PNG透明问题主要体现在以下几个方面: 1. PNG8格式的图片,IE6只能正确处理索引颜色中的透明,即单一颜色的透明,无法处理复杂的半透明效果。 2. PNG24格式的图片,IE6会完全忽略Alpha透明通道,导致图片...
而PNG-24则可以显示更多的颜色并具有Alpha通道,能够实现不同程度的透明,但在IE6中默认是不透明的。 解决这个问题的一个常见方法是使用CSS滤镜。IE6特有的CSS滤镜属性可以用来模拟PNG-24的Alpha透明。例如,我们...
PNG是一种无损压缩的位图格式,提供了24位颜色和透明度的支持,但在IE6中,PNG-24格式的图片无法实现真正的透明效果,只有PNG-8格式部分支持,这对于追求高质量和设计感的网页开发者来说是个巨大的挑战。 "超好用的...
内含插件及使用说明 ie(IE)png半透明插件使用微软的VML语言对PNG图片进行重新绘制,以达到半透明的效果,并且能支持background-position和background-repeat属性。
为了解决IE6下的PNG透明问题,有几种常见的解决策略: 1. **CSS滤镜方法**:IE6特有的CSS滤镜属性可以用来模拟PNG的透明效果。可以使用`filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your...
PNG(Portable Network Graphics)是一种支持透明度的图像格式,但在IE6中,它无法正确显示带有alpha透明通道的PNG-24图像,导致图片出现半透明部分变成全黑或者背景颜色无法透过,这被称为“PNG透明问题”。...