AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

IE6下PNG图片透明问题

2009-05-05 759
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 这个问题其实包括两个方面，一是作为图片的透明度问题，即使用IMG标签的PNG图片的透明度，二是PNG图片作为背景情况下的图片透明度问题。对于第一个问题，如果是单张图片的话，可使用如下方法解决： Code 如果图片很多的话，则可使用如下方法处理： Codefunction correctPNG(){  for(var i=0; i-1){window.

      这个问题其实包括两个方面，一是作为图片的透明度问题，即使用IMG标签的PNG图片的透明度，二是PNG图片作为背景情况下的图片透明度问题。对于第一个问题，如果是单张图片的话，可使用如下方法解决：

img_1c53668bcee393edac0d7b3b3daff1ae.gif img_405b18b4b6584ae338e0f6ecaf736533.gif Code
<!--empty.gif为一张全透明的空白图片 没有则留空-->
<img id='show_comment' src="empty.gif" style="width:100px;height:12px;cursor:pointer;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='001.png',sizingMethod='image')">

如果图片很多的话，则可使用如下方法处理：

img_1c53668bcee393edac0d7b3b3daff1ae.gif img_405b18b4b6584ae338e0f6ecaf736533.gif Code
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);
};

第二个问题见：http://www.cnblogs.com/lhb25/archive/2009/05/05/1449926.html

文章标签：
前端开发
JavaScript
内存技术
HTML5
移动开发
秋天风景
目录
相关文章
我的代码果然有问题
|
前端开发 JavaScript
JS 下载文件方法分享(解决图片文件无法直接下载和 IE兼容问题)
JS 下载文件方法分享
我的代码果然有问题
665 0
江山如婳
|
Web App开发 前端开发
图片垂直居中（兼容IE6/7）
我们知道单行文字垂直居中时只用让`height=line-height`即可,那么图片以及多行文字是如何垂直居中的呢？现以如下图片和代码为例，将我搜集得到的方法做一个总结说明：
江山如婳
1628 0
云栖希望。
|
前端开发 JavaScript
IE6 png图片实现半透明的方法
云栖希望。
1506 0
老朱教授
|
JavaScript 前端开发
【jQuery】解决IE6下PNG图片不透明的问题
老朱教授
858 0
余二五
|
Web App开发 JavaScript 前端开发
png24图片在IE6下的透明度问题
余二五
845 0
嗯哼9925
|
Web App开发 前端开发 开发工具
Web标准：Img图片在IE6下显示空白的Bug解决方案
嗯哼9925
960 0
浣熊干面包
|
Web App开发 JavaScript 前端开发
在IE6中使用透明格式的PNG图片
浣熊干面包
1281 0
科技小能手
|
JavaScript 前端开发
IE6下png图片透明代码
科技小能手
1093 0
技术小胖子
|
JavaScript
Form表单提交按钮图片IE6下背景透明（js提交）
技术小胖子
1279 0
文艺小青年
|
Web App开发 前端开发 JavaScript
CSS解决IE6下PNG图片背景不透明的问题
文艺小青年
1132 0