在ie6中使用png格式的透明图像

最新推荐文章于 2024-07-26 11:41:15 发布
最新推荐文章于 2024-07-26 11:41:15 发布
阅读量828 收藏
点赞数
分类专栏： 浏览器 文章标签： ie filter javascript float tiff 存储

PNG图像格式介绍： PNG是20世纪90年代中期开始开发的图像文件存储格式，其目的是企图替代GIF和TIFF文件格式，同时增加一些GIF文件格式所不具备的特性。流式网络图形格式(Portable Netw

 

 　　

 

PNG图像格式介绍：

 

PNG是20世纪90年代中期开始开发的图像文件存储格式，其目的是企图替代GIF和TIFF文件格式，同时增加一些GIF文件格式所不具备的特性。流式网络图形格式(Portable Network Graphic Format，PNG)名称来源于非官方的“PNG’s Not GIF”，是一种位图文件(bitmapfile)存储格式，读成“ping”。PNG用来存储灰度图像时，灰度图像的深度可多到16位，存储彩色图像时，彩色图像的深度可多到48位，并且还可存储多到16位的α通道数据。

 

IE6下PNG背景透明的显示问题

 

PNG格式比起GIF来表现色彩更丰富，特别是表现渐变以及背景透明的渐变要比GIF格式出色很多，目前，最新的浏览器基本上都支持PNG格式。但是IE6不支持PNG背景透明，会显示一个灰色的框。

 

IE6下PNG背景透明的解决办法

 

一.IE6使用gif，其他则使用png来解决PNG背景灰

.pngImg { background:url(image.png);_background:url(image.gif);}

 

注意上文的_号，目前IE7,8以及Firefox浏览器等都不支持此CSS语法，只有IE6识别。因此，其他浏览器会调用PNG，而IE6刚调用GIF。

 

二.滤镜filter解决IE6下背景灰

background:url(a.png) repeat-x 0 0;

_background:none;

_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="a.png",sizingMethod="crop");

 

上面的原理是其他调用PNG，IE6,则先设背景没有，然后调用滤镜使之显示PNG图片。

 

缺陷：IE6下背景无法平铺，这个问题很严重。同时在性能上也有小问题，页面中次数不是很多的时候该办法还是可行的。

 

AlphaImageLoader滤镜会导致该区域的链接和按钮无效，解决的办法是为链接或按钮添加：position: relative;这样条代码，使其相对浮动。AlphaImageLoader无法设置背景的重复，所以对图片的切图精度会有很高的精确度要求。

 

解决IE下的链接无效可用最后面的方法：

 

三.利用JS解决html中的img(插入在网页中的png图像)png背景灰问题

function correctPNG()

{

for(var i=0; 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 = " +"filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"

+ "(src=\'" + img.src + "\',sizingMethod='scale');\">"

img.outerHTML = strNewHTML

i = i-1

}

}

}

window.attachEvent("onload",correctPNG);

 

页面中插入一段js即可。原理同上，只是将img放入了background。它会将所有插入的PNG都如此处理。

 

这也是一端同样的JS

 

在网页head部分引用下面的这段JS

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;  

     };  

    };  

};  

if(navigator.userAgent.indexOf("MSIE")> -1){  

  window.attachEvent("onload", CorrectPNG);  

};

 

四。调用iepngfix.htc解决IE6PNG背景灰及拉伸问题

 

此方法来自：http://www.twinhelix.com/css/iepngfix/ 此方法基于Winodws平台，在Linux下不支持htc,没有验证过，但有网友发文证实。

 

以下片段添加至css文件

.pngImg {behavior: url(iepngfix.htc);}

 

以下片段添加至html文件

<div class="pngImg">PNG背景图片</div>

<img src="png图片"class="pngImg" alt="">

 

详细的应用方法这里就不介绍啦。

 

 在逼不得已且身不由己必须使用PNG的情况下，这种方法应该是比较优秀的，虽然不能完美的解决IE6的平铺，但是至少是实现了拉伸，使得很多情况下可以代替平铺来使用。当然效率的问题任然是存在

 

五.让“块”透明的方法

.div { FILTER: alpha(opacity=20);moz-opacity: 0.2; opacity: 0.2;}

 

测试IE6,IE7,IE8,FF2,FF3均通过。提示：IE6,IE7需设置一个宽度(100%也行)，否则看不到效果。

 

 六.DD_belatedPNG,解决IE6不支持PNG绝佳方案

 

整个互联网上解决这个IE6的透明PNG的方案也是多不胜数,从使用IE特有的滤镜或是expression,再到javascript+透明GIF替代.但是这些方法都有一个缺点,就是不支持CSS中backgrond-position与background-repeat.

 

 而我今天介绍DD_belatedPNG,只需要一个理由,就是它支持backgrond-position与background-repeat.这是其他js插件不具备的.同时DD_belatedPNG还支持a:hover属性,以及<img>.

 

 看Demo:http://www.ediyang.com/demo/DD_Png/

 

 原理

 这个js插件使用了微软的VML语言进行绘制,而其他多数解决PNG问题的js插件用的是AlphaImageLoader滤镜.

 

 使用方法

 1.在这里下载DD_belatedPNG.js文件.

 http://dillerdesign.com/experiment/DD_belatedPNG/#download

 

 2.在网页中引用,如下:

<!--[if IE 6]>  

<script src="DD_belatedPNG.js"mce_src="DD_belatedPNG.js"></script>  

<script type="text/javascript"> 

  

/* EXAMPLE */  

DD_belatedPNG.fix('.png_bg');  

/* 将 .png_bg 改成你应用了透明PNG的CSS选择器,例如我例子中的'.trans'*/  

</script>

<![endif]-->  

 

3.有2种调用函数,一种是DD_belatedPNG.fix(),如上代码.另一种是fix(),这中方法需要在函数内指出css选择器名. 

  

 使用a:hover请留意 

 5-25更新:如果你也像jutoy同学一样想要用透明PNG作为a:hover时的背景图片,那么你需要留意你的代码,需要以”a:hover”来作为选择器. 否则可能会导致无法成功.同时我也更新了demo,请需要的更新查看.接着我们看看正确的代码:

<!--[if IE 6]>  

<script type="text/javascript"src="js/DD_belatedPNG.js" ></script>  

<scripttype="text/javascript">  

DD_belatedPNG.fix('.trans,.box a:hover');  

</script>  

<![endif]-->  

 

七.通过 javascript 和css 滤镜解决 IE 整站 png 背景透明问题

<script type="text/javascript"language="javascript">

function enablePngImages() {

var imgArr =document.getElementsByTagName("IMG");

for(i=0; i<imgArr.length; i++){

  if(imgArr[i].src.toLowerCase().lastIndexOf(".png") != -1){

   imgArr[i].style.filter ="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" +imgArr[i].src + "', sizingMethod='auto')";

   imgArr[i].src = "spacer.gif";

   }

  

   if(imgArr[i].currentStyle.backgroundImage.lastIndexOf(".png")!= -1){

   var img =imgArr[i].currentStyle.backgroundImage.substring(5,imgArr[i].currentStyle.backgroundImage.length-2);

   imgArr[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+img+"',sizingMethod='crop')";

   imgArr[i].style.backgroundImage = "url(spacer.gif)";

   }

}

}

 

function enableBgPngImages(bgElements){

for(i=0; i<bgElements.length; i++){

  if(bgElements[i].currentStyle.backgroundImage.lastIndexOf(".png")!= -1){

   //alert(bgElements[i]);

   var img =bgElements[i].currentStyle.backgroundImage.substring(5,bgElements[i].currentStyle.backgroundImage.length-2);

   bgElements[i].style.filter ="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+img+"',sizingMethod='crop')";

   bgElements[i].style.backgroundImage = "url(spacer.gif)";

   }

}

}

</script>

 

<img src="pngpic.png"alt="" border="0" />

<!--[if lt IE 7]>

<script type='text/javascript'>

var bgElements;

enablePngImages();

if(bgElements){

  enableBgPngImages(bgElements);

}

</script>

<![endif]-->

 

资料参考来源：

 

http://ask.cttstar.com/www/2/32/283132.html

 

http://www.11gz.com/blog/2009/04/11/ie6-png-transparent/

 

http://bufanliu.javaeye.com/blog/227980

 

http://www.twinhelix.com/css/iepngfix/

 

http://xssep.cn/view-332.html

 

http://www.geekso.com/PNG-IE6/

 

http://hi.baidu.com/zhao0p/blog/item/3ee026d5c1abdac751da4bb8.html

 

 


circleTBAG
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
png在IE6 下无法透明的解决方法汇总
09-03
总的来说，虽然IE6对PNG透明的支持不完美，但通过使用滤镜和其他技巧，我们可以确保在IE6下也能呈现PNG的透明效果。在开发过程中，考虑到老版本浏览器的兼容性是至关重要的，这有助于确保网站在更广泛的用户群体中...
IE6中PNG Alpha透明(全集)
09-22
标题中的“IE6中PNG Alpha透明(全集)”是指在Internet Explorer 6（简称IE6）浏览器中处理PNG图像的Alpha透明效果的问题。在描述中提到，其他如IE7、Firefox、Opera以及基于WebKit内核的Chrome和Safari浏览器都支持...
html中支持透明图片的格式,IE6 png图片透明的解决方法教程
weixin_39586353的博客
06-05 750
IE6中支持PNG半透明图片完美解决方法-divcss5亲测从IE7及IE7以上版本都支持PNG半透明格式图片，而唯独IE6不支持png格式透明图片，而GIF半透明效果不及png半透明格式图片，由此我们迫不及待需要解决IE6兼容png图片方法，这里www.divcss5.com为你介绍一种万能支持Png透明图片css hack 。支持png透明图片解决方法图下文。一、需要JS文件支持 - ...
IE6中CSS方法实现PNG图片透明
半颗茜
01-29 751
关于ie6中使用png之前知道的方法都是比较复杂的，使用js或者滤镜。 最近在同事那里学到了比较简单的方法：1、使用质量较好的图片，比如png24、png32、png8，都可以；然后针对ie6可以单独使用一张没有特别效果的图片，保存成png8或者gif都可以，但最好是png8；注：png8与gif都是索引色透明。（这个是稍微简单的方式了）2、保存格式选为png8，对于边缘有半透明效果的需要特殊处理
解决ie6png透明的方法小结
adobe1992
07-25 668
PNG格式比起GIF来表现色彩更丰富，特别是表现渐变以及背景透明的渐变要比GIF格式出色很多，目前，最新的浏览器基本上都支持PNG格式。 （1）使用IE特有的expression .pngImg { background:url(image.png); _background:url(image.gif);}  原理：上文的_号，目前IE7,8以及Firefox浏览器等都不支持此CSS语
png-24在ie6中的几种透明方法
amkokq884222的博客
07-31 106
下面介绍几种常用的解决办法： dd_belatedpng.js法 引入js文件 <!--[ifIE6]> <scripttype="text/javascript"src="js/dd_belatedpng.js"></script> <script> DD_belatedPNG.fix('.pngfix')...
IE6中PNG透明背景图片处理方法
zhaodan_linda 积累&学习&生活
07-30 789
PNG图片可以表现更为绚丽多彩的颜色，常见的一些具有矢量效果的图片、图标都采用png格式，但是具有透明背景的png格式图片在IE6中却不是背景透明的，透明背景部分会显示出#DBEAED的淡灰色，表现效果很糟糕，为了使用透明背景图片只有采用gif格式了，但是gif格式会出现明显的锯齿效果，所以只有设法修复IE6的这个问题。解决的办法就是使用IE的Microsoft.AlphaImageLoader滤
ie6下使PNG背景图片透明的方法
bangxi2796的博客
04-01 101
最近发现在IE6下不能正常显示PNG图片，这让我很苦恼。使用PNG图片的透明或半透明的特性能做出非常漂亮的网页来，在Firefox和Opera中对PNG的支持都非常的好，但是IE却无视PNG图片这一特性的 “存在”，虽然IE7已经支持可IE6还是不行。查了一些资料，基本解决了这一问题，这里跟大家分享。 虽然有让IE6支持PNG透明背景的JS程序，但不是很方便，而且影响代码的简洁，还是用...
[原创] png格式的图片在IE6实现透明
banjue1105的博客
06-23 111
1filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=bEnabled,sizingMethod=sSize,src=sURL) 属性： enabled : 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true | false true :　 默认值。滤镜激活。 false :　...
使IE6下PNG背景透明的七种方法任你选
一只北漂的小鱼oO
12-08 291
最近发现了个很方便的方法（转自：http://mengqing.org/archives/ie6-png24-transparent.html）  IE6下png24透明 完美支持background-position Posted on 2010 年 11 月 19 日 by 縫隙 相信如何解决png在ie6下透明的问题困扰了很多人。为了追求更好的页面效果，很多人喜欢使用png
ie6 png透明
danshanpeng的博客
10-17 117
IE6 png 透明 (三种解决方法)(转来的哦) FF和IE7已经直接支持透明的png图了,下面这个主要是解决IE6下透明PNG图片有灰底的 ============================================================================= 此效果简单，。。。。相当不错 推荐 style="FILTER...
处理ie6下png格式透明效果
06-07
PNG格式允许24位色彩的同时还提供了 Alpha 通道，可以实现半透明效果，但在IE6中，这种透明特性却无法正常显示，导致图片背景呈现出不透明的黑色或白色。以下是对这个问题的详细分析和解决方案： 首先，我们需要...
实现IE6下PNG背景透明的方法
01-23
- 使用CSS3的`rgba()`颜色函数和`opacity`属性，但这些在IE6中不被支持。 8. **渐进增强和优雅降级策略** - 渐进增强（Progressive Enhancement）：优先确保所有浏览器的基本功能，然后逐步添加更高级的特性，如...
IE6下PNG背景透明的方法特效代码
03-20
2. **IE6的透明问题**：在IE6中，PNG24格式的图片无法实现透明，PNG8的透明度只能是全透明或不透明，无法实现半透明效果。这在需要渐变透明或者半透明背景时成为一大问题。 3. **解决方案**：有几种常见的方法可以...
【React 】开发环境搭建详细指南
lph159的博客
07-24 1124
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
已解决：vue-office/excel 多个sheet点击切换，滚动条高度不重置，表格视图位置不正确
weixin_42289080的博客
07-26 164
解决 @vue-office/excel 多个sheet切换，内容以及滚动条展示不正确的问题
vue el-select的下拉树形结构 带检索功能
最新发布
Jokerxiuka的博客
07-26 126
【代码】vue el-select的下拉树形结构。
Vue3可媲美Element Plus Tree组件实战之移除节点
felix_alone2012的博客
07-25 592
《Element Plus Tree - 自定义节点内容》示例中介绍了移除节点的用法，个人觉得作为提供给用户API，应该遵循迪米特法则，把功能实现的细节封装在组件内部，而提供给用户最简单的操作方式，同时在此基础上支持用户的扩展。因此，在API使用的人性化方便，个人觉得element plus做的并不优秀。为此，我们自定义tree组件时对用户API可以设计的更人性化些。
Firefox与IE的JavaScript与CSS差异详解
"这篇文章主要探讨了Firefox和Internet Explorer（IE）之间在JavaScript和CSS方面的差异，特别是关于PNG透明处理、innerText与textContent的区别、禁止选取网页内容的方法、滤镜的应用以及事件处理的异同。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值