首页
所有分类
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 相关文章推荐
this和执行上下文实现代码
Jul 01 Javascript
ASP.NET jQuery 实例17 通过使用jQuery validation插件校验ListBox
Feb 03 Javascript
jquery选择器需要注意的问题
Nov 26 Javascript
JS动态加载当前时间的方法
Feb 09 Javascript
js实现分割上传大文件
Mar 09 Javascript
JS实现鼠标移上去显示图片或微信二维码
Dec 14 Javascript
深入理解Javascript中的观察者模式
Feb 20 Javascript
vue2.0 如何把子组件的数据传给父组件(推荐)
Jan 15 Javascript
Javascript 编码约定(编码规范)
Mar 11 Javascript
前端js中的事件循环eventloop机制详解
May 15 Javascript
Vue中实现权限控制的方法示例
Jun 07 Javascript
处理JavaScript值为undefined的7个小技巧
Jul 28 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
Grundig(1) ATS-909X(1) S500(1) 山进(2) S400(1) SANGEAN(1) PL990(2) D1875(1) D1835(1) S700(1)
You might like
Dedecms V3.1 生成HTML速度的优化办法
2007/03/18 PHP
php ignore_user_abort与register_shutdown_function 使用方法
2009/06/14 PHP
利用PHP实现图片等比例放大和缩小的方法详解
2013/06/06 PHP
yii2 commands模式以及配置crontab定时任务的方法
2017/08/19 PHP
Laravel框架实现的上传图片到七牛功能详解
2019/09/06 PHP
JQuery 实现在同一页面锚点链接之间的平滑滚动
2014/10/29 Javascript
jQuery中slice()方法用法实例
2015/01/07 Javascript
JS实现动态移动层及拖动浮层关闭的方法
2015/04/30 Javascript
angularjs自定义ng-model标签的属性
2016/01/21 Javascript
JS实现将Asp.Net的DateTime Json类型转换为标准时间的方法
2016/08/02 Javascript
Bootstrap实现input控件失去焦点时验证
2016/08/04 Javascript
详解js中常规日期格式处理、月历渲染和倒计时函数
2016/12/28 Javascript
js实现带三角符的手风琴效果
2017/03/01 Javascript
Vue.js展示AJAX数据简单示例讲解
2017/03/29 Javascript
Angular 1.x个人使用的经验小结
2017/07/19 Javascript
详解使用React进行组件库开发
2018/02/06 Javascript
基于Vue sessionStorage实现保留搜索框搜索内容
2020/06/01 Javascript
[03:40]2014DOTA2国际邀请赛 B神专访：躲箭真的很难
2014/07/13 DOTA
用Python进行一些简单的自然语言处理的教程
2015/03/31 Python
Python内置函数delattr的具体用法
2017/11/23 Python
详解TensorFlow在windows上安装与简单示例
2018/03/05 Python
关于pytorch多GPU训练实例与性能对比分析
2019/08/19 Python
Python3操作读写CSV文件使用包过程解析
2020/04/10 Python
python db类用法说明
2020/07/07 Python
JRE、JDK、JVM之间的关系怎样
2012/05/16 面试题
英文版区域经理求职信
2013/10/23 职场文书
试用期员工考核制度
2014/01/22 职场文书
毕业生欢送会主持词
2014/03/31 职场文书
献爱心活动总结
2014/05/07 职场文书
岗位说明书标准范本
2014/07/30 职场文书
主要领导对照检查材料
2014/08/26 职场文书
2015年节能减排工作总结
2015/05/14 职场文书
律师催款函范文
2015/06/24 职场文书
PyTorch 如何设置随机数种子使结果可复现
2021/05/12 Python
python 实现图与图之间的间距调整subplots_adjust
2021/05/21 Python
PostgreSQL聚合函数介绍以及分组和排序
2022/04/12 PostgreSQL