首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

png在IE6 下无法透明的解决方法汇总

Posted in Javascript onMay 21, 2015

FF和IE7已经直接支持透明的png图了,下面这个主要是解决IE6下透明PNG图片有灰底的

style="FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/fl.png')"

语法：
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )

enabled : 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true | false true : 默认值。滤镜激活。
false : 滤镜被禁止。

sizingMethod : 可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。 crop : 剪切图片以适应对象尺寸。
image : 默认值。增大或减小对象的尺寸边界以适应图片的尺寸。
scale : 缩放图片以适应对象的尺寸边界。

src : 必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数，滤镜将不会作用。

特性：
Enabled : 可读写。布尔值(Boolean)。参阅 enabled 属性。
sizingMethod : 可读写。字符串(String)。参阅 sizingMethod 属性。
src : 可读写。字符串(String)。参阅 src 属性。

说明：
在对象容器边界内，在对象的背景和内容之间显示一张图片。并提供对此图片的剪切和改变尺寸的操作。如果载入的是PNG(Portable Network Graphics)格式，则0%-100%的透明度也被提供。
PNG(Portable Network Graphics)格式的图片的透明度不妨碍你选择文本。也就是说，你可以选择显示在PNG(Portable Network Graphics)格式的图片完全透明区域后面的内容。

实例：解决IE6下png透明失效的问题。

CSS样式:

.png{
_background: url(images/angel.png) no-repeat !important; 
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=noscale, src="images/angel.png");
background:none;
width:118px;height:133px;
}

.png div{position:relative;}

HTML代码：

<div class="png">
<div>
CSS 背景PNG透明 及 链接失效问题解决
</div>
</div>

/*
兼容IE6.0、IE7.0、FF，
IE7.0和新版的FF其实是可以不加filter滤镜直接透明的。
*/

=============================================================================

方法一:定义一个样式,给某个div应用这个样式后，div的透明png背景图片自动透明了。（注意两处图片的路径写法不一样，本例中，icon_home.png图片与html文件在相同目录）
 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
.qq {
height: 90px;
width: 90px;
background-image: url(icon_home.png)!important;/* FF IE7 */
background-repeat: no-repeat;

_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='icon_home.png'); /* IE6 */
_ background-image: none; /* IE6 */
}
-->
</style>
</head>

<body>

<div class="qq"></div>

</body>
</html>

方法二: 给img定义样式，页面上所有透明png即自动透明了。（这方法只对直接插入的图片有效，对背景图无效）注意，要准备一个透明的小图片transparent.gif,大小不限。必须放在和html相同的目录
请勿大量使用，否则会导致页面打开很慢!!!)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
.mypng img {
azimuth: expression(
this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true);
}

</style>
</head>

<body>
换成你的png图片
<div class="mypng">
<img src="icon_face_07.png" width="30" height="30" />
<img src="icon_face_10.png" width="30" height="30" />
<img src="icon_face_08.png" width="30" height="30" />
</div>
</body>
</html>

方法三:用JS实现,加上一段js代码后,所有插入的透明png自动透明了.（注意，这方法也是只对直接插入的图片有效，对背景图无效）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="JavaScript"> 
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6. 
{ 
  var arVersion = navigator.appVersion.split("MSIE") 
  var version = parseFloat(arVersion[1]) 
  if ((version >= 5.5) && (document.body.filters)) 
  { 
    for(var j=0; j<document.images.length; j++) 
    { 
     var img = document.images[j] 
     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 
       j = j-1 
     } 
    } 
  }   
} 
window.attachEvent("onload", correctPNG); 
</script>
<style type="text/css">
<!--
body {

}
-->
</style></head>

<body>
把图片换成你自己的图片
<img src="img/icon_face_03.png" width="30" height="30" /><!--把图片换成你自己的图片 -->
<img src="img/icon_face_05.png" width="30" height="30" />
<img src="img/menu_title_over.png" width="130" height="36" />
</body>
</html>

方法四

<script language="javascript">
// 修复 IE 下 PNG 图片不能透明显示的问题
function fixPNG(myImage) {
var arVersion = navigator.appVersion.split("MSIE");
var version = parseFloat(arVersion[1]);
if ((version >= 5.5) && (version < 7) && (document.body.filters))
{
   var imgID = (myImage.id) ? "id='" + myImage.id + "' " : "";
   var imgClass = (myImage.className) ? "class='" + myImage.className + "' " : "";
   var imgTitle = (myImage.title) ? "title='" + myImage.title  + "' " : "title='" + myImage.alt + "' ";
   var imgStyle = "display:inline-block;" + myImage.style.cssText;
   var strNewHTML = "<span " + imgID + imgClass + imgTitle

  + " style=\"" + "width:" + myImage.width

  + "px; height:" + myImage.height

  + "px;" + imgStyle + ";"

  + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"

  + "(src=\'" + myImage.src + "\', sizingMethod='scale');\"></span>";
   myImage.outerHTML = strNewHTML;
} } 

window.onload=function(){
     document.getElementById("top").style.height=screen.height/5+"px";
    
}//
</script>

用法如下：

<img src="logo.png" width="328" height="325" border="0" onload="fixPNG(this)" />

以上所述就是本文的全部内容了，希望大家能够喜欢。

png在IE6 下无法透明的解决方法汇总

- Author -

hebedich

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
对google个性主页的拖拽效果的js的完整注释[转]
Apr 10 Javascript
JavaScript实用技巧(一)
Aug 16 Javascript
javascript 构造函数方式定义对象
Jan 02 Javascript
js实现简洁的TAB滑动门效果代码
Sep 06 Javascript
jQuery实现的超链接提示效果示例【附demo源码下载】
Sep 09 Javascript
JavaScript中清空数组的方法总结
Dec 02 Javascript
JS点击图片弹出文件选择框并覆盖原图功能的实现代码
Aug 25 Javascript
浅谈vue的踩坑路
Aug 31 Javascript
Vue父子组建的简单通信之控制开关Switch的实现
Jun 04 Javascript
React和Vue中监听变量变化的方法
Nov 14 Javascript
js判断一个对象是数组（函数）的方法实例
Dec 19 Javascript
小程序自定义弹框效果
Nov 16 Javascript
javascript相关事件的几个概念
May 21 #Javascript
javascript实时显示当天日期的方法
May 20 #Javascript
JavaScript中String.prototype用法实例
May 20 #Javascript
实现无刷新联动例子汇总
May 20 #Javascript
javascript中CheckBox全选终极方案
May 20 #Javascript
javascript消除window.close()的提示窗口
May 20 #Javascript
在JS方法中返回多个值的方法汇总
May 20 #Javascript
ICF-SW7600GR(1) PHILIPS(3) 松下(1) 德劲1103(3) 根德(2) 德生9700DX(1) 飞利浦(2) 德生PL330(2) ICF-SW55(1) Panasonic(1)
You might like
php版微信公众平台之微信网页登陆授权示例
2016/09/23 PHP
PHP 常用时间函数资料整理
2016/10/22 PHP
PHP文件管理之实现网盘及压缩包的功能操作
2017/09/20 PHP
在Laravel的Model层做数据缓存的实现
2019/09/26 PHP
基于PHP的微信公众号的开发流程详解
2020/08/07 PHP
php操作redis命令及代码实例大全
2020/11/19 PHP
jquery 经典动画菜单效果代码
2010/01/26 Javascript
基于KMP算法JavaScript的实现方法分析
2013/05/03 Javascript
Javascript call和apply区别及使用方法
2013/11/14 Javascript
JavaScript中的操作符==与===介绍
2014/12/31 Javascript
关于js函数解释(包括内嵌,对象等)
2016/11/20 Javascript
js时间戳与日期格式之间相互转换
2017/12/11 Javascript
浅谈React中组件间抽象
2018/01/27 Javascript
微信小程序基于movable-view实现滑动删除效果
2020/01/08 Javascript
解决Echarts 显示隐藏后宽度高度变小的问题
2020/07/19 Javascript
jquery实现简单拖拽效果
2020/07/20 jQuery
[00:35]DOTA2上海特级锦标赛 VP战队宣传片
2016/03/04 DOTA
[03:06]3分钟带你回顾DOTA2完美盛典&完美大师赛
2017/12/06 DOTA
Python进行数据提取的方法总结
2016/08/22 Python
利用Python实现在同一网络中的本地文件共享方法
2018/06/04 Python
使用Python开发SQLite代理服务器的方法
2018/12/07 Python
python 实现在tkinter中动态显示label图片的方法
2019/06/13 Python
Python3中urlencode和urldecode的用法详解
2019/07/23 Python
python 实现二维字典的键值合并等函数
2019/12/06 Python
Django-rest-framework中过滤器的定制实例
2020/04/01 Python
css3.0 图形构成实例练习一
2013/03/19 HTML / CSS
adidas瑞典官方网站：购买阿迪达斯鞋子和运动服
2019/12/11 全球购物
中专生自荐信
2013/10/12 职场文书
三项教育活动实施方案
2014/03/30 职场文书
报告会主持词
2014/04/02 职场文书
《锄禾》教学反思
2014/04/08 职场文书
公司担保书格式范文
2014/05/12 职场文书
幼儿园社区活动总结
2014/07/07 职场文书
总经理检讨书
2014/09/15 职场文书
学校政风行风评议工作总结
2014/10/21 职场文书
公司放假通知怎么写
2015/04/15 职场文书