`
jianhan513
  • 浏览: 20760 次
  • 性别: Icon_minigender_2
  • 来自: 上海
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

ie6下使PNG背景图片透明的方法

阅读更多

注:本文只适用于png用作背景时,作图片使用时的透明问题并不适用

虽然有让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代码来实现:

 

.news{width:364px;height:212px;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='scale', src="/templets/images/news_bg.png");background:none; }

 

这段简单的CSS代码就可以在IE中正常的显示PNG透明背景,但是会发现在FF下不会出现背景,分析原因:AlphaImageLoader滤镜只能被IE支持,FF是不支持该滤镜的。

有些初学者可能会在代码中添加这样一段:background-image: url(/templets/images/news_bg.png);

 

添加这样一段代码虽然能解决FF下的问题,都是IE又出现问题:新的背景会覆盖在滤镜的背景之上,导致滤镜显示无效,这时候就用到IE和FF对CSS读取的区别特性了:

我们可以分开IE6跟IE7、FF,因为IE6能识别样式前“_”号,而IE7、FF却不行,所以我们先写IE7和FF能识别的CSS:

 

.news1{width:364px;height:212px;background:url(/templets/images/news_bg.png) top no-repeat;}

 

而后在代码后加上AlphaImageLoader滤镜代码,并使用“_”号前缀,所以最终完整的代码是这样的:

 

.news1{clear:both;float:left;width:364px;height:212px;margin-bottom:16px;background:url(/templets/images/news_bg.png) top no-repeat;_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='scale', src="/templets/images/news_bg.png");_background:none;}

 

这样效果可以实现,也不增加多少代码量。

不过需要注意的是:AlphaImageLoader滤镜会导致该区域的链接和按钮无效,解决的办法是为链接或按钮使用相对定位,或者添加:position: relative;这样条代码,使其相对浮动。

最后AlphaImageLoader无法设置背景的重复,所以对图片的切图精度会有很高的精确度要求。

分享到:
评论

相关推荐

    IE6下PNG背景透明的方法

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

    IE6完美解决PNG背景透明

    标题"IE6完美解决PNG背景透明"指向的是如何在IE6中正确显示具有透明度的PNG背景图像的方法。DD_belatedPNG是一个JavaScript库,专门用来解决这个兼容性问题。它通过CSS扩展和JavaScript代码,使IE6能够理解并渲染PNG...

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

    在互联网早期,Internet Explorer 6(简称IE6)是广泛使用的浏览器,但它存在许多兼容性问题,其中之一就是对PNG(Portable Network Graphics)图像格式的透明背景支持不足。PNG是一种先进的位图格式,提供了24位...

    IE6 png背景图片透明

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

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

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

    IE6png背景图片透明

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

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

    IE6下PNG背景透明的方法.rarIE6下PNG背景透明的方法.rarIE6下PNG背景透明的方法.rarIE6下PNG背景透明的方法.rarIE6下PNG背景透明的方法.rarIE6下PNG背景透明的方法.rar

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

    例如,我们可以添加以下CSS代码来使PNG24图片在IE6下变得透明: ```css .pngFix { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='yourimage.png', sizingMethod='scale'); /* 避免在其他...

    ie6 火狐 谷歌 png背景透明

    标题和描述提到的"ie6 火狐 谷歌 png背景透明",主要涉及到这三种浏览器在处理PNG图像透明度时的问题及解决方案。 1. **IE6与PNG透明问题**:Internet Explorer 6(简称IE6)是微软早期的浏览器版本,它对PNG-24...

    IE6浏览器下PNG背景透明

    然而,Internet Explorer 6(简称IE6)作为较早版本的浏览器,对PNG透明的支持并不完全,导致PNG图片在IE6下显示时会出现灰色背景或者其他不透明的问题。这个问题在网页设计中是个常见挑战,但可以通过一些技术手段...

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

    这个压缩包文件"IE6下PNG背景透明的方法.zip"提供了针对这个问题的解决方案,使得PNG图片在IE6下也能实现背景透明。 首先,我们来详细了解一下PNG格式的透明特性。PNG(Portable Network Graphics)是一种无损压缩...

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

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

    ie6下png图片透明方法

    在这段代码中,`DD_belatedPNG.fix`方法会自动处理指定元素(本例中的`img`和`div`)上的PNG图片,使其在IE6下具有透明效果。 当然,除了JavaScript方法外,还可以通过CSS hack的方式,为IE6设置特定样式。例如,...

    处理ie6下png格式透明效果

    其中,PNG(Portable Network Graphics)格式的图片透明问题就是一个典型的例子。PNG格式允许24位色彩的同时还提供了 Alpha 通道,可以实现半透明效果,但在IE6中,这种透明特性却无法正常显示,导致图片背景呈现出...

    js修复IE不能显示PNG图片透明背景的方法

    ### js修复IE不能显示PNG图片透明背景的方法 #### PNG图片及其特性 PNG(Portable Network Graphics)是一种常用的位图图形格式,以其高效的压缩算法和对透明度的支持而受到广泛青睐。相较于传统的GIF格式,PNG...

    完美解决IE6下png透明

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

Global site tag (gtag.js) - Google Analytics