`

IE6 png 透明 (几种解决方法)(转来的哦)

 
阅读更多

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(http://www.snowangel.cn/images/angel.png) no-repeat !important;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=noscale, src="http://www.snowangel.cn/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滤镜直接透明的。
*/

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

第 1 种方法:定义一个样式,给某个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>


第 2 种方法: 给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>


第 3 种方法:用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 {
background-color: #9999CC;
}
-->
</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)" />


分享到:
评论

相关推荐

    IE6不兼容png透明背景解决方法

    解决这个问题的方法主要有以下几种: 1. **CSS滤镜法**:IE6提供了一种名为`AlphaImageLoader`的CSS滤镜,可以用来处理PNG透明度。通过在CSS中添加如下代码,可以解决大部分问题: ```css .ie6-png-fix { ...

    完美解决IE6下png透明

    为了解决这个问题,有以下几种常见方法: 1. **CSS滤镜法**:这是最常用的解决方式,利用CSS中的`filter`属性,添加`progid:DXImageTransform.Microsoft.AlphaImageLoader`来处理PNG透明。例如: ```css .ie6png ...

    ie 下png 透明图片 兼容解决方案

    以下是针对IE浏览器PNG透明问题的几种解决方案: 1. **CSS滤镜法**:利用CSS滤镜(Filter)属性,我们可以让IE6支持PNG24的透明。例如: ```css .pngFix { behavior: url(iepngfix.htc); /* 需要一个名为iepng...

    超好用的IE6png透明JS

    "超好用的IE6png透明JS"是一个专门解决这一问题的JavaScript库。这个库通过JavaScript代码来模拟PNG透明效果,使得在IE6浏览器中可以正确显示具有透明通道的PNG图片,从而提升了用户体验。虽然现在IE6的使用率已经...

    js_IE6支持png透明解决png_ie6下不透明背景图片

    总之,要解决IE6中的PNG透明问题,开发者通常需要借助JavaScript库和CSS滤镜。虽然这种方法在技术上可行,但也会带来额外的性能开销,并且只能在IE6中生效。随着现代浏览器的普及,这个问题逐渐变得不再重要,但了解...

    处理IE6浏览器显示.png图片透明度文件

    为了解决这个问题,开发者们提出了几种解决方案,主要分为JavaScript方法和CSS HTC(行为)文件方法。 **JavaScript解决方案**: 一种常见的JavaScript解决方案是使用`DD_belatedPNG.js`库。这个库通过JavaScript...

    IE6 png背景图片透明

    要解决IE6中的PNG透明问题,有几种常见的方法: 1. **CSS滤镜(Filter)**:IE6提供了一个名为`AlphaImageLoader`的滤镜,可以用来处理PNG的透明性。通过在CSS中添加如下代码,可以实现PNG图片的透明效果: ```css...

    处理ie6下png格式透明效果

    解决IE6中的PNG透明问题,主要有以下几种方法: 1. **CSS滤镜法**:利用CSS的`filter`属性,可以实现IE6对PNG24透明的支持。例如: ```css .pngFix { filter: progid:DXImageTransform.Microsoft....

    IE 6 下PNG图片实现透明

    以上就是实现IE6下PNG图片透明的几种常见方法。虽然现代浏览器已经不再存在这些问题,但考虑到仍有一部分用户可能还在使用IE6,这些技术对于开发兼容性良好的网站仍然是必要的。在实际应用中,结合条件注释、CSS滤镜...

    解决IE6 PNG图片透明问题

    2. CSS滤镜法:IE6特有的CSS滤镜可以用来解决PNG透明问题。例如,可以添加以下CSS代码: ```css .pngfix { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='你的图片路径.png', sizingMethod='...

    IE6png问题解决方法

    解决IE6中的PNG问题,主要有以下几种方法: 1. **CSS滤镜法**:利用IE6特有的CSS滤镜属性,可以实现PNG-24的透明效果。例如: ```css .pngfix { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader...

    网页中PNG图片透明的几种解决方式

    以下将详细介绍几种解决PNG图片在不同浏览器中透明问题的方法,以确保网页在各种环境下都能呈现出预期的效果。 #### 方法一:CSS Hack 针对IE6的PNG透明问题,可以使用CSS hack来实现兼容性。这种方法主要是通过`...

    IE6下png透明问题解决的最佳方案.rar

    解决IE6下的PNG透明问题有多种方法,以下是几种常见的解决方案: 1. **CSS滤镜法**: 使用CSS的`filter`属性,可以强制IE6渲染PNG透明。例如: ```css .ie6_png { filter: progid:DXImageTransform.Microsoft....

    IE6中 PNG 背景透明的最佳解决方案

    3. **JavaScript库**:如DD_Png.js等库,通过JavaScript来解决IE6的PNG透明问题。这些库通常会在页面加载后自动处理所有需要透明效果的PNG图片,使得它们在IE6下也能正常显示。 4. **条件注释**:在HTML中使用条件...

    IE6兼容PNG透明

    要解决IE6中的PNG透明问题,有几种常见的方法: 1. **CSS滤镜(Filter)**:这是最常用的解决方案,通过CSS为图片添加特定的滤镜样式,使IE6能够理解并显示PNG透明。例如: ```css .pngFix { filter: progid:...

    ie6 火狐 谷歌 png背景透明

    3. **解决IE6 PNG透明方案**:对于IE6中的PNG透明问题,有几种常见的解决方法。其中一种是使用JavaScript库,如压缩包中的`DD_belatedPNG_0.0.8a.js`。这个脚本可以修复IE6对PNG透明的支持,通过模拟PNG的alpha通道...

    IE6下PNG背景透明的方法.zip

    本压缩包文件提供了几种解决IE6中PNG透明问题的方案。 首先,`checkerboard.gif`和`blank.gif`是两种常见的GIF图像,它们通常用于替代透明PNG图像,以模拟透明效果。`checkerboard.gif`呈现棋盘格图案,可以显示...

    ie6下png透明图片的处理

    为了解决IE6下的PNG透明图片问题,开发者们提出了几种解决方案: 1. **CSS滤镜方法**:利用IE6特有的CSS滤镜属性,如`filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='...

    PNG在IE6下透明

    为了解决这个问题,开发者通常会采取以下几种方法: 1. **CSS滤镜(Filter)**:IE6使用CSS滤镜属性来实现透明效果。对于PNG-24图像,可以添加以下CSS样式: ```css .png-fix { filter: progid:DXImageTransform...

    IE6中png透明效果显示

    为了解决IE6下的PNG透明问题,有几种常见的解决策略: 1. **CSS滤镜方法**:IE6特有的CSS滤镜属性可以用来模拟PNG的透明效果。可以使用`filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your...

Global site tag (gtag.js) - Google Analytics