`
Pweb
  • 浏览: 55245 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

IE6下PNG图片透明(alpha通道)的5种方法

阅读更多

想特别说明一下,IE6与生俱来就支持png8的索引色透明度,但不支持png的 alpha 透明度。而我们一直要解决的是让IE6支持PNG的 alpha 透明度。下面我收集整理了4种方法,但都是以滤镜、Js、css 等作为基础模拟还原效果,虽然没有真正的解决alpha透明度问题,但也总算解决了燃眉之急。

IE6支持png8透明:

IE6与生俱来就支持png8的索引色透明度,但不支持png或8位以上的 alpha 透明度。而对于非动画的GIF建议你使用PNG8,因为体积会更小。

测试实例:http://blog.gulu77.com/demo/200809/test_IE6png8/

1、AlphaImageLoader 筛选器

使用简介:在每个标签样式中插入:

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’image.png’, sizingMethod=’scale’)

官方原文:http://support.microsoft.com/kb/294714/zh-cn go

测试实例:http://blog.gulu77.com/demo/200809/test_AlphaImageLoader/

2、PNG Transparency in IE

使用简介:相对来说比较简洁,使用一段包含滤镜的JavaScript 就可以模拟图片或背景 PNG alpha 透明度。

官方原文:http://codingforums.com/archive/index.php?t-80555.html go

测试实例:http://blog.gulu77.com/demo/200809/test_PNGTransparncyinIE/

3、IE PNG Fix v1.0 / 2.0 Alpha 2

使用简介:页面标签使用behavior:url(”iepngfix.htc”);来调用外部包含js、css的iepngfix.htc文件來修正PNG alpha 透明度。

官方原文:http://www.twinhelix.com/css/iepngfix/ go

测试实例:http://blog.gulu77.com/demo/200809/test_iepngfix/

4、IE7/IE8 JavaScript library

使用简介:ie7/ie8-js是一个解决IE与W3C标准的冲突的JS库,使微软的IE的行为像一个Web标准兼容的浏览器,支持更多的W3C标准。

官方原文:http://code.google.com/p/ie7-js/ go

测试实例:http://blog.gulu77.com/demo/200809/test_ie7-js/

全部实例打包下载:http://blog.gulu77.com/demo/200809/test_png.rar

5、还发现一个方法:belatedPNG 。具体方法是将下面的代码插到<head></head>之间:

<!–[if IE 6]>
<script src="DD_belatedPNG_0.0.7a-min.js"></script>
<script>
DD_belatedPNG.fix(””*””);
</script>
<![endif]–>

此方法能同时解决图片和背景问题。

所用到的 js 文件可以点击这里 下载(5.41 kb)。

分享到:
评论

相关推荐

    IE6下PNG背景透明的方法

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

    IE 6 下PNG图片实现透明

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

    处理ie6下png格式透明效果

    处理完IE6下的PNG透明问题后,可能会遇到一些新的挑战,例如性能影响、图片质量下降或是与其它CSS样式的冲突。因此,在应用解决方案时,应进行充分的测试,确保在保持视觉效果的同时,不影响网站的整体性能和用户...

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

    要实现IE6下的PNG透明,通常采用以下几种JavaScript解决方案: 1. **DD_belatedPNG**:这是一个广泛使用的JavaScript库,由Dean Edwards开发。它通过模拟PNG Alpha透明效果,使IE6能够正确显示PNG图片。核心原理是...

    ie6下png图片透明方法

    PNG图片支持24位颜色以及8位的alpha通道,也就是所谓的PNG-24格式,它允许图片部分像素具有不同程度的透明。然而,IE6并不支持这种透明效果,它只支持PNG-8格式,而PNG-8仅能实现二值透明(完全透明或完全不透明)。...

    IE6下PNG背景透明的七种方法.

    以下是对标题和描述中提到的七种解决IE6下PNG背景透明问题的方法的详细解释: 1. CSS Hack 使用CSS的特定浏览器识别语法,例如下划线`_`前缀,来针对IE6设置不同的背景图像。例如: ```css .pngImg { ...

    IE 6 PNG透明通道

    4. **HTML5 doctype**:使用HTML5的doctype可以强制IE6进入"Quirks Mode",在这种模式下,PNG透明问题可能会得到缓解,但这不是最佳实践,因为它会导致其他兼容性问题。 以上就是关于“IE 6 PNG透明通道”的知识点...

    IE6下PNG图片透明教程

    IE6只能正确处理PNG8格式的简单透明,即alpha透明,而对于PNG24格式的半透明(也称为阿尔法通道透明)则无法正常显示。这使得在设计网页时,如果希望在IE6下实现半透明效果,就需要采取一些额外的技巧。 1. 使用CSS...

    IE6png透明JS

    PNG(Portable Network Graphics)是一种常见的图像格式,它支持24位真彩色以及Alpha通道透明度,但在IE6中,对于带有Alpha透明度的PNG-24图像,浏览器默认无法正确显示透明效果。这个问题导致了“IE6png透明JS”这...

    IE下png图片无法透明的处理方法

    然而,在IE6及以下版本,由于浏览器内核的限制,PNG-24的透明度(阿尔法通道)会被忽略,导致图片背景变为不透明,严重影响了网页设计的视觉效果。 处理IE浏览器下PNG图片无法透明的方法有多种: 1. **CSS滤镜方法...

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

    PNG(Portable Network Graphics)是一种支持透明度的图像格式,但在IE6中,它无法正确显示带有alpha透明通道的PNG-24图像,导致图片出现半透明部分变成全黑或者背景颜色无法透过,这被称为“PNG透明问题”。...

    IE6支持PNG透明图片方法

    本文将深入探讨IE6支持PNG透明图片的方法,以便在使用这种浏览器时仍能实现理想的网页效果。 首先,理解问题的核心:IE6对于PNG8格式的图片可以处理简单的色调透明,但对于PNG24格式的图片则无法正确显示Alpha通道...

    IE6_PNG透明终极解决办法

    标题中的“IE6_PNG透明终极解决办法”指的是在Internet Explorer 6(简称IE6)浏览器中处理PNG图片透明度的问题。PNG格式的图片支持Alpha透明通道,允许半透明效果,但在IE6这个古老的浏览器中,对PNG8和PNG24格式的...

    ie6下png透明图片的处理

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

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

    特别是PNG24,它包含了24位颜色和一个alpha通道,用于实现半透明效果,但IE6只能处理没有alpha通道的PNG8格式。因此,当24位PNG图片被用作背景时,IE6会默认将其背景设为不透明。 解决这个问题有几种常见方法: 1....

    js支持ie6 png图片透明

    - IE6_PNG_repeat(平铺):对于需要平铺的背景图片,需要特别处理,确保平铺后的透明效果在IE6下也能正常工作。这通常需要结合JavaScript库的功能,如DD_belatedPNG.js提供的方法,来实现平铺和透明的兼容。 4. ...

    web透明技巧-IE中的png图片透明

    然而,IE6及更早版本并不完全支持PNG-8和PNG-24的阿尔法通道,导致在这些浏览器中显示PNG图片时可能会出现不透明或错误的透明效果。 为了在IE中实现PNG图片的透明,我们可以采用CSS滤镜(Filter)技术。滤镜是IE...

    IE6png图片透明

    这个库通过JavaScript代码来模拟PNG的透明效果,使得PNG-24格式图片在IE6下也能显示透明效果。具体来说,"DD_belatedPNG"库通过添加额外的元素和CSS样式,将PNG图片的透明部分替换为一个背景颜色,然后调整这些元素...

    VB 透明PNG图片显示控件

    4. **绘制图像**:在控件的OnPaint事件中,使用Graphics对象的DrawImage方法,指定源图像、目标位置和绘图区域,同时设置Alpha通道的透明度。 5. **处理鼠标和键盘事件**:为了让控件可以响应用户的交互,你需要添加...

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

    PNG是一种无损压缩的图像格式,支持透明度(Alpha通道)。在其他现代浏览器中,如Firefox、Chrome、Safari和Opera,PNG的透明特性可以完美呈现。但在IE6及以下版本,由于其内核的限制,只支持8位PNG(不包含Alpha...

Global site tag (gtag.js) - Google Analytics