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> |
分享到:
相关推荐
idpngfix.htc 文件就是一个HTC行为,它通过JavaScript代码来模拟透明PNG在旧版IE浏览器中的正确渲染。 这个2.0版的补丁通常包括以下特性: 1. **兼容性**:针对IE5.5及以上版本,尤其是针对问题最严重的IE6。 2. **...
PNG(Portable Network Graphics)是一种支持透明度的图像格式,但在IE6中,它无法正确显示带有alpha透明通道的PNG-24图像,导致图片出现半透明部分变成全黑或者背景颜色无法透过,这被称为“PNG透明问题”。...
总结来说,要使IE浏览器正确显示PNG透明图片,可以通过使用JavaScript的AlphaImageLoader滤镜技术来解决。这种方法可以帮助开发者克服IE浏览器对PNG透明度支持的局限,使得在各种浏览器环境下都能获得一致的用户体验...
为了解决这一问题,开发者们开发了一种利用JavaScript来修复IE浏览器不支持PNG透明背景的方法。这种方法通过动态创建HTML元素并应用特定的CSS样式以及ActiveX控件,来模拟PNG的透明效果。 下面是具体的实现步骤: ...
标签中的“IEpng透明浏览器兼容 所有浏览器支持png透明”表明这个插件不仅关注IE浏览器的PNG透明问题,而且可能也考虑到了其他浏览器的兼容性,确保在各种现代浏览器中也能正常工作,提供一致的用户体验。...
总的来说,DD_belatedPNG是JavaScript技术在解决浏览器兼容性问题上的一次创新尝试,它通过JavaScript模拟出原本缺失的功能,使得在旧版IE浏览器上也能呈现现代网页设计的效果。然而,随着浏览器的不断更新换代,...
以下是针对IE浏览器PNG透明问题的几种解决方案: 1. **CSS滤镜法**:利用CSS滤镜(Filter)属性,我们可以让IE6支持PNG24的透明。例如: ```css .pngFix { behavior: url(iepngfix.htc); /* 需要一个名为iepng...
PNG(Portable Network Graphics)格式支持透明度,使得设计师可以创建半透明或有背景色透明的图像,但在旧版本的IE浏览器中,PNG-24格式的图片透明效果往往无法正常显示。 PNG-8格式只支持256色,并且可以实现简单...
4. **条件注释(Conditional Comments)**:这是微软在IE浏览器中引入的一种特殊语法,允许开发者针对IE的不同版本插入特定的HTML代码。可以使用条件注释来包含专为IE6准备的CSS链接或内联样式。 5. **升级提示**:...
这个脚本允许开发者在不牺牲兼容性的情况下,在老版IE浏览器上实现PNG透明效果,极大地扩展了设计师的创作空间。 "IEPNGFix"的工作原理是利用CSS滤镜(filter)属性,尤其是AlphaImageLoader滤镜,它可以调整PNG...
同时,还需要一个`.gif`文件作为占位符,以确保在非IE浏览器中也能正确显示。 综上所述,解决PNG图片在不同浏览器中的透明问题有多种方法,从简单的CSS hack到复杂的HTC文件应用,开发者应根据实际需求和目标浏览器...
在早期的Web开发中,IE6...综上所述,这个压缩包的内容可能是一个完整的解决方案,包括了使PNG图片在IE6下透明的JavaScript代码以及处理HTML5兼容性的脚本,为开发者提供了在旧版IE浏览器中实现现代Web设计所需的支持。
对于PNG-24图像,我们可以利用CSS的`background-image`和`background-repeat`属性配合`alpha()`滤镜(对于旧版IE浏览器)或`rgba()`函数(对于现代浏览器)实现阿尔法透明效果。 ```html <!-- 适用于所有现代...
- 在非IE浏览器中,PNG-24和PNG-8的透明都能得到很好的支持。但在IE6中,PNG-24的Alpha通道被忽略,导致图片显示为不透明;而PNG-8的索引透明则能正常工作,但仅限于全透明和不透明两种状态。 3. 解决方案: - ...
需要注意的是,unitpngfix.js仅适用于IE6,对于其他更现代的浏览器,如IE7及以上版本,以及其他非IE浏览器,如Firefox、Chrome、Safari等,已经内置了对PNG透明度的原生支持,因此无需使用这个脚本。此外,随着IE6的...
5. **升级或替换浏览器**:尽管这个方法不是直接解决问题,但鼓励用户升级到更现代的浏览器,如IE8及以上版本,或者使用其他非IE浏览器,可以避免这个问题。 总之,处理IE6中的PNG显示问题需要一些技巧和额外的工作...
通过在网页中引入这个脚本,可以使得这些老版本的IE浏览器能够正确地显示具有透明效果的PNG图片,提升用户体验。 在实现机制上,`pngfix.js`通常会遍历页面中的所有PNG图像,应用特定的CSS样式或者DOM操作来模拟PNG...
VML是一种微软专为IE浏览器开发的矢量图形技术,它允许在IE6中创建具有透明度的元素。 2. **CSS Alpha Transparency Filter**: IE6支持CSS滤镜(Filter)属性,可以用来模拟透明效果。例如,可以使用`filter: ...
4. **替换原有图片元素**:将新生成的包含滤镜效果的`span`元素替换原有图片元素的位置,即使用`outerHTML`属性进行替换,从而在IE6中实现正确的PNG透明显示。 ### 示例代码分析 提供的示例代码片段正是实现上述...
然而,在Internet Explorer 6和7这两个较老的版本中,由于其内核的限制,IE浏览器无法正确地显示带有Alpha通道的PNG24位图像,导致透明或半透明部分显示为黑色或者其他不正确的颜色。这个问题对网页设计师和开发者来...