`
isiqi
  • 浏览: 16349426 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

在IE浏览器中正确显示PNG透明图片

阅读更多

  png图片有很好的品质。阴影效果也不会有杂边,很流畅。如果插入网页的话可以给网站内容增色不少!更重要的是在不增加图片容量大小的情况下提高了页面的图片的质量。对于有复杂背景,如:在有颜色过度背景上插入不规则边框的图片带来极大很便利!

  但目前IE中对于插入的透明背景的.png的图片是不能正常显示的。IE会自动给".png"格式的图片加个灰色背景。

  解决这个的方法是增加javascript。具体方法如下:

  把下面的代码放在head区就可以解决问题了。

以下是引用片段:
<scriptlanguage="javascript">
functioncorrectPNG()
{
for(vari=0;i<document.images.length;i++)
{
varimg=document.images[i]
varimgName=img.src.toUpperCase()
if(imgName.substring(imgName.length-3,imgName.length)=="PNG")
{
varimgID=(img.id)?"id='"+img.id+"'":""
varimgClass=(img.className)?"class='"+img.className+"'":""
varimgTitle=(img.title)?"title='"+img.title+"'":"title='"+img.alt+"'"
varimgStyle="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
varstrNewHTML="<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
i=i-1
}
}
}
window.attachEvent("onload",correctPNG);
</script>

  也可以把这段代码单独加在一张图片上:

以下是引用片段:
<span
style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='male.png',sizingMethod='scale');"></span>

分享到:
评论

相关推荐

    IE浏览器png图片显示补丁

    idpngfix.htc 文件就是一个HTC行为,它通过JavaScript代码来模拟透明PNG在旧版IE浏览器中的正确渲染。 这个2.0版的补丁通常包括以下特性: 1. **兼容性**:针对IE5.5及以上版本,尤其是针对问题最严重的IE6。 2. **...

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

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

    在IE流览器中正确显示PNG透明图片

    总结来说,要使IE浏览器正确显示PNG透明图片,可以通过使用JavaScript的AlphaImageLoader滤镜技术来解决。这种方法可以帮助开发者克服IE浏览器对PNG透明度支持的局限,使得在各种浏览器环境下都能获得一致的用户体验...

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

    为了解决这一问题,开发者们开发了一种利用JavaScript来修复IE浏览器不支持PNG透明背景的方法。这种方法通过动态创建HTML元素并应用特定的CSS样式以及ActiveX控件,来模拟PNG的透明效果。 下面是具体的实现步骤: ...

    IE下png透明插件

    标签中的“IEpng透明浏览器兼容 所有浏览器支持png透明”表明这个插件不仅关注IE浏览器的PNG透明问题,而且可能也考虑到了其他浏览器的兼容性,确保在各种现代浏览器中也能正常工作,提供一致的用户体验。...

    DD_belatedPNG.js解决IE6浏览器下的PNG透明图片显示问题

    总的来说,DD_belatedPNG是JavaScript技术在解决浏览器兼容性问题上的一次创新尝试,它通过JavaScript模拟出原本缺失的功能,使得在旧版IE浏览器上也能呈现现代网页设计的效果。然而,随着浏览器的不断更新换代,...

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

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

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

    PNG(Portable Network Graphics)格式支持透明度,使得设计师可以创建半透明或有背景色透明的图像,但在旧版本的IE浏览器中,PNG-24格式的图片透明效果往往无法正常显示。 PNG-8格式只支持256色,并且可以实现简单...

    IE6 png背景图片透明

    4. **条件注释(Conditional Comments)**:这是微软在IE浏览器中引入的一种特殊语法,允许开发者针对IE的不同版本插入特定的HTML代码。可以使用条件注释来包含专为IE6准备的CSS链接或内联样式。 5. **升级提示**:...

    旧浏览器PNG图片透明效果脚本 IEPNGFix v2

    这个脚本允许开发者在不牺牲兼容性的情况下,在老版IE浏览器上实现PNG透明效果,极大地扩展了设计师的创作空间。 "IEPNGFix"的工作原理是利用CSS滤镜(filter)属性,尤其是AlphaImageLoader滤镜,它可以调整PNG...

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

    同时,还需要一个`.gif`文件作为占位符,以确保在非IE浏览器中也能正确显示。 综上所述,解决PNG图片在不同浏览器中的透明问题有多种方法,从简单的CSS hack到复杂的HTC文件应用,开发者应根据实际需求和目标浏览器...

    IE6下PNG透明代码

    在早期的Web开发中,IE6...综上所述,这个压缩包的内容可能是一个完整的解决方案,包括了使PNG图片在IE6下透明的JavaScript代码以及处理HTML5兼容性的脚本,为开发者提供了在旧版IE浏览器中实现现代Web设计所需的支持。

    使png图片在网页中显示为透明

    对于PNG-24图像,我们可以利用CSS的`background-image`和`background-repeat`属性配合`alpha()`滤镜(对于旧版IE浏览器)或`rgba()`函数(对于现代浏览器)实现阿尔法透明效果。 ```html &lt;!-- 适用于所有现代...

    js支持ie6 png图片透明

    - 在非IE浏览器中,PNG-24和PNG-8的透明都能得到很好的支持。但在IE6中,PNG-24的Alpha通道被忽略,导致图片显示为不透明;而PNG-8的索引透明则能正常工作,但仅限于全透明和不透明两种状态。 3. 解决方案: - ...

    IE6PNG透明背景显示灰色--解决方法(unitpngfix.js)

    需要注意的是,unitpngfix.js仅适用于IE6,对于其他更现代的浏览器,如IE7及以上版本,以及其他非IE浏览器,如Firefox、Chrome、Safari等,已经内置了对PNG透明度的原生支持,因此无需使用这个脚本。此外,随着IE6的...

    PNG图片在IE6中非正常显示的处理方法

    5. **升级或替换浏览器**:尽管这个方法不是直接解决问题,但鼓励用户升级到更现代的浏览器,如IE8及以上版本,或者使用其他非IE浏览器,可以避免这个问题。 总之,处理IE6中的PNG显示问题需要一些技巧和额外的工作...

    ie 网站全部png图片修复透明(js)

    通过在网页中引入这个脚本,可以使得这些老版本的IE浏览器能够正确地显示具有透明效果的PNG图片,提升用户体验。 在实现机制上,`pngfix.js`通常会遍历页面中的所有PNG图像,应用特定的CSS样式或者DOM操作来模拟PNG...

    IE6下png透明处理脚本(js)

    VML是一种微软专为IE浏览器开发的矢量图形技术,它允许在IE6中创建具有透明度的元素。 2. **CSS Alpha Transparency Filter**: IE6支持CSS滤镜(Filter)属性,可以用来模拟透明效果。例如,可以使用`filter: ...

    png ie6下无法显示透明效果解决方法

    4. **替换原有图片元素**:将新生成的包含滤镜效果的`span`元素替换原有图片元素的位置,即使用`outerHTML`属性进行替换,从而在IE6中实现正确的PNG透明显示。 ### 示例代码分析 提供的示例代码片段正是实现上述...

    ie6、ie7无法显示png图片,pngfilt.dll

    然而,在Internet Explorer 6和7这两个较老的版本中,由于其内核的限制,IE浏览器无法正确地显示带有Alpha通道的PNG24位图像,导致透明或半透明部分显示为黑色或者其他不正确的颜色。这个问题对网页设计师和开发者来...

Global site tag (gtag.js) - Google Analytics