`
bufanliu
  • 浏览: 200200 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

IE6下png图片和png背景透明

阅读更多
http://www.163show.cn/blog/index.html
应用PNG图片的透明或半透明的特性能做出非常漂亮的网页来。Firefox和Opera对PNG的支持非常的好,都是IE却无视PNG图片这一特性的“存在”,虽然IE7已经支持都是IE6还是不行。查了一些资料,基本解决了这一问题,准备应用到PJskin上。
虽然有让IE6支持PNG透明背景的JS程序,都是不是很方便,还是用CSS来实现的好。使用到的就是:
IE5.5+的AlphaImageLoader滤镜

语法:
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 地址指定背景图像。假如忽略此参数,滤镜将不会作用。

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


了解了以上的内容,可以写一段简单的CSS代码(还不是完全正确的代码):

#div1 {
   height: 600px;
   width: 260px;
   padding: 20px;
   background-repeat: repeat;
   filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="bj1.png"

}



这段简单的CSS代码就可以在IE中正常的显示PNG透明背景,但是会发现在FF下不会出现背景,分析原因:
AlphaImageLoader滤镜只能被IE支持,FF是不支持该滤镜的
有些初次写的时候很多人会这样:
在代码中添加这样一段: background-image: url(bj1.png);
添加这样一段代码虽然能解决FF下的问题,都是IE又出现问题:新的背景会覆盖在滤镜的背景之上,导致滤镜显示无效,这时候就用到IE和FF对CSS读取的区别特性了:
Firefox、Opera等完全支持PNG透明图片的浏览器也支持子选择器(>),而IE不识别(包括IE7),所有我们可以通过这来定义Firefox、Opera等浏览器中PNG图片的样式。代码如下:

html>body #div1 {
   background-repeat: repeat;background-image: url(bj1.png);
}


同时,我们通过只有IE才识别的通配符(*),来定义IE浏览器中的滤镜。代码如下:

* #div1 {filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="bj1.png")

}


而#div1 {}就放一些IE和FF共用的设置来减少代码文件的大小。最终就是这样:

#div1 {
   height: 600px;
   width: 260px;
   padding: 20px;
   background-repeat: repeat;
  

}

/* for ie7 ff*/
html>body #div1 {
    background:url(../images/menu1.png) no-repeat;
}
/* for ie6 */
* #div1 {
    background:none;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/menu1.png', sizingMethod='crop');
}

需要注意的是:AlphaImageLoader滤镜会导致该区域的链接和按钮无效,解决的办法是为链接或按钮添加:position: relative;这样条代码,使其相对浮动。AlphaImageLoader无法设置背景的重复,所以对图片的切图精度会有很高的精确度要求。
--------------------------------------------------------------------
如果在网页中直接插入png图片想使其透明只需加入以下js代码,整个页面内的所有直接插入的png图片都可以实现透明:

<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>

--------------------------------------------------------------------

如果是想使用png做背景透明的话,需要用到css滤镜和hack:

html>body .png { background:url(1.png); width:300px; height:100px; border:#000 solid 1px;}

/* ie6 */* html .png { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='1.png');
    background:none; width:300px; height:100px; border:#000 solid 1px;}
分享到:
评论

相关推荐

    IE6下PNG背景透明的方法

    以下是关于"IE6下PNG背景透明的方法"的详细解释: 1. **CSS滤镜法**:这是最基础的解决方式,利用CSS中的`filter`属性。对于PNG8格式的图片,可以使用`filter:progid:DXImageTransform.Microsoft.AlphaImageLoader...

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

    本文将深入探讨这个问题,并提供JavaScript解决方案来实现IE6下PNG图片的透明显示。 首先,我们需要理解为什么IE6不支持PNG透明。PNG-24格式允许半透明和全透明效果,但IE6只支持8位的PNG-8,而这种格式最多只能有...

    IE6完美解决PNG背景透明

    这个库通过JavaScript和CSS的结合,使得在IE6下也能呈现出与现代浏览器一致的PNG透明效果,包括平铺、定位和链接功能。开发人员在实际应用中,需要对JavaScript和CSS有一定的掌握,才能有效地利用这个工具。

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

    PNG是一种先进的位图格式,提供了24位颜色和透明度支持,但在IE6中,PNG-24格式的透明效果会呈现为灰色背景,这给网页设计带来了困扰。以下是对这个问题的深入探讨和解决方案。 首先,理解问题的根源:IE6对PNG-24...

    解决ie6下png图片背景问题

    在IT行业中,尤其是在网页设计和开发领域,"解决ie6下png图片背景问题"是一个经典且重要的主题。Internet Explorer 6(简称IE6)是微软公司早期推出的一款浏览器,由于其对PNG(Portable Network Graphics)图像格式...

    IE6下PNG透明代码

    5. **PNG透明修复脚本**:压缩包内的“IE6 PNG处理”脚本可能是一个JavaScript库,如DD_belatedPNG,它通过检测浏览器版本,对IE6下的PNG图片进行特殊处理,使其能够正确显示透明效果。这类脚本通常会分析图片,创建...

    IE6 png背景图片透明

    在IT领域,尤其是在网页设计和开发中,"IE6 png背景图片透明"是一个经典的问题,因为Internet Explorer 6(简称IE6)对于PNG格式图像的透明处理与其他现代浏览器存在显著差异。PNG是一种流行的图像格式,支持24位...

    处理ie6下png格式透明效果

    总之,处理IE6下的PNG透明效果是一个既需要技术知识,又需要策略和经验的过程。通过以上的方法和注意事项,开发者可以有效地解决这个问题,确保网站在各种浏览器环境下都能呈现出预期的视觉效果。

    完美解决IE6下png透明

    然而,通过一些技术手段,我们可以“完美解决IE6下PNG背景、图片透明问题”。 首先,我们需要了解PNG图像格式。PNG是一种无损压缩的位图格式,支持透明度设置,包括完全透明和半透明。对于其他现代浏览器,如Fire...

    IE6png透明JS

    为了解决这个问题,开发者们开发了一系列JavaScript库和技巧,使得在IE6下也能实现PNG图像的透明效果。 1. **Alpha Image Loader滤镜**:IE6提供了一个名为"Alpha Image Loader"的滤镜,可以通过CSS样式应用到元素...

    解决IE6下PNG图片背景色不透明问题的方法

    在互联网的早期,Internet Explorer 6 (IE6) 是广泛使用的浏览器之一,但它存在许多兼容性问题,其中之一就是PNG图片的背景透明问题。PNG(Portable Network Graphics)是一种支持透明度的图像格式,但在IE6中,对于...

    解决IE6.0下png背景透明及连接不能点击

    总结来说,要解决IE6.0下的PNG背景透明和链接点击问题,开发者需要借助特定的JavaScript库(如`ie6-png.js`)和CSS技巧(如`behavior: url(ie6-png.htc)`和`z-index`)。虽然现代浏览器已经不再需要这些技巧,但理解...

    IE6_PNG透明终极解决办法

    4. **条件注释**:IE6特有的条件注释可以用来针对IE6应用特定的CSS样式,确保只在IE6下启用透明修复代码,不影响其他浏览器。 5. **升级或替换浏览器**:尽管这是最理想的解决方案,但实际操作中由于各种原因(如...

    IE6下png图片透明解决方案

    在互联网的早期,Internet Explorer 6(简称IE6)是主导浏览器之一,但它存在...在提供的压缩包“32.IE6下png图片透明解决方案”中,可能包含示例代码、教程或更具体的解决步骤,可以帮助进一步理解和应用这些方法。

    最好的IE6下png透明图片修复代码

    "最好的IE6下png透明图片修复代码"提供了一个解决方案,使得在Internet Explorer 6(IE6)这种老版本浏览器中,也能正确显示具有透明效果的PNG图像。这个问题的核心在于,IE6只支持PNG-8格式的透明,而不支持PNG-24...

    实现IE6下png图片透明JS代码

    为了解决这个问题,开发者们利用JavaScript编写了一些脚本,以实现IE6下PNG图片的透明效果。本文将详细讲解这一技术。 PNG(Portable Network Graphics)是一种无损压缩的位图格式,支持24位色彩和8位透明通道,即...

    IE6png背景图片透明

    为了解决这个问题,开发者们开发了一些JavaScript解决方案,使得IE6能够支持PNG背景图片的透明显示。 一、PNG格式与透明性 PNG(Portable Network Graphics)是一种无损压缩的图像文件格式,支持透明度和丰富的色彩...

    让 IE6 支持 PNG 透明

    - `blank.gif`可能是一个占位符图像,用于在IE6下显示透明区域的背景。 - 其他PNG文件如`xheart.png`, `title-background.png`, `find.small.png`等,都是待处理的PNG图像,可能在网页设计中需要透明效果。 8. **...

Global site tag (gtag.js) - Google Analytics