|
解决IE6下png透明失效的问题-IE6 png 透明 (四种解决方法)
有时需要在网页中用到一些透明背景图片，对效果要求不高的用GIF图片即可。但对于有透明度、阴影、发光等效果的，PNG图片就比GIF图片更有优势。但目前只有Firefox、Opera、IE7这三款浏览器对PNG图片支持得比较好，我们常用的IE6.0却不支持透明的PNG图片，因此要让PNG透明背景图片在IE6.0 中正确显示，只能在CSS里用滤镜来解决了。
下面倚天互联介绍这个主要是解决IE6下透明PNG图片有灰底的(相当不错 推荐)
=========== png图片 选择 png 32 格式能保持完美的半透明，或者投影效果 ===================
IE css滤镜中有一个使png背景透明的滤镜，JavaScript方法也是应用的这个滤镜实现png背景透明的。
写法：filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’../image /png_test.png’);
用法示例：
.png{background:url(../image/png_test.png);}
* html .png {_background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’../image/png_test.png’);}
语法：
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 地址指定背景图像。假如忽略此参数，滤镜将不会作用。
特性：
Enabled : 可读写。布尔值(Boolean)。参阅 enabled 属性。
sizingMethod : 可读写。字符串(String)。参阅 sizingMethod 属性。
src : 可读写。字符串(String)。参阅 src 属性。
说明：
在对象容器边界内，在对象的背景和内容之间显示一张图片。并提供对此图片的剪切和改变尺寸的操作。如果载入的是PNG(Portable Network Graphics)格式，则0%-100%的透明度也被提供。
PNG(Portable Network Graphics)格式的图片的透明度不妨碍你选择文本。也就是说，你可以选择显示在PNG(Portable Network Graphics)格式的图片完全透明区域后面的内容。
实例：解决IE6下png透明失效的问题。
CSS样式:
.png{
_background: url(path/angel.png) no-repeat !important;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=noscale, src="path/angel.png");
background:none;
width:118px;height:133px;
}
.png div{position:relative;}
HTML代码：
<div class="png">
<div>
CSS 背景PNG透明 及 链接失效问题解决
</div>
</div>
=============================================================================
第 1 种方法:定义一个样式,给某个div应用这个样式后，div的透明png背景图片自动透明了。
注意两处图片的路径写法不一样，icon_home.png图片与html文件在相同目录
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
.qq {
height: 90px;
width: 90px;
background-image: url(icon_home.png)!important;
background-repeat: no-repeat;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='icon_home.png');
_ background-image: none;
}
-->
</style>
</head>
<body>
<div class="qq"></div>
</body>
</html>
第 2 种方法: 给img定义样式，页面上所有透明png即自动透明了。（这方法只对直接插入的图片有效，对背景图无效）
注意，要准备一个透明的小图片transparent.gif,大小不限。必须放在和html相同的目录,请勿大量使用，否则会导致页面打开很慢!!!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
.mypng img {
azimuth: expression_r(
this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true);
}
</style>
</head>
<body>
换成你的png图片
<div class="mypng">
<img src="icon_face_07.png" width="30" height="30" />
<img src="icon_face_10.png" width="30" height="30" />
<img src="icon_face_08.png" width="30" height="30" />
</div>
</body>
</html>
第 3 种方法:用JS实现,加上一段js代码后,所有插入的透明png自动透明了.（注意，这方法也是只对直接插入的图片有效，对背景图无效）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<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>
<style type="text/css">
<!--
body {
background-color: #9999CC;
}
-->
</style></head>
<body>
把图片换成你自己的图片
<img src="img/icon_face_03.png" width="30" height="30" />
<img src="img/icon_face_05.png" width="30" height="30" />
<img src="img/menu_title_over.png" width="130" height="36" />
</body>
</html>
第四种方法，这个是刚才从网上找到的
在做WEB设计时最让人头痛的就是不同浏览器之间的显示差异，这一点尤其以IE6最让人深恶痛绝。最近就碰到一个非常让人头痛的问题，PNG在IE6下的透明效果失效。研究了差不多三天，终于不完美解决了这个问题。
W3C标准推荐使用PNG图片作为网页首选图像资源，但是漂亮、和谐而且有透明效果的PNG却在IE6下显示得一塌糊涂。为了解决这个问题查阅了很多资料，核心原理是使用IE独有的CSS样式中的behaviro属性，最终用如下方法解决：
1.下载iepngfix.zip，其中有三个文件：iepngfix.htc、iepngfix_tilebg.js、blank.gif，将这几个文件解压出来放到所需要使用png做为CSS背景的网站的根目录下。
2.假定一个div需使用png作为背景，标准的做法是：
#mydiv {
background:url(../img/main.png) no-repeat;
width:739px;
height:366px;
top:12%;
left:20%;
position:absolute;
}
此时该背景能在FF和IE7下正常显示，但是在IE6下会有恐怖的“灰边”。需要使用滤镜来解决。具体做法是使用上面提到的htc文件，在CSS样式的最后定义一个behaviro属性。新的的样式定义为：
#login_main {
background:url(../img/main.png) no-repeat;
width:739px;
height:366px;
top:12%;
left:20%;
position:absolute;
behavior: url("iepngfix.htc");
}
此时要注意url内的路径是相对于index.htm来说的，而不是相对于定义其样式的css文件。
3.在index.htm文件中需要引入上文中提到的第二个javascript文件，使用
<script language="javascript" src="iepngfix_tilebg.js"></script>
插入到<head></head>中
此时大功告成，使用IE6浏览index.htm文件看看效果，得意的笑吧。顺便提醒一句，对于普通IE6升级成IE7的XP用户，这两种浏览器是无法在同一个操作系统中共存的，笔者比较愚笨，使用了SUN的virtual box装了一个WIN2K3，幸好virtual box提供全屏和无缝模式，使得虚拟机用起来还是蛮流畅的。
优化：
方案一：可以发现，当需要用到的png图片比较多时IE6反应会有些迟钝，因为IE6每次加载需要透明的PNG时都会进行一系列的运算，将png中的alpha透明部分用blank.gif空白位图代替，可以想象这样的计算规模有多庞大。没办法，这是无法避免的，Vista 和IE7早就出来了，还有非常卓越的FF可供选择，使用IE6的客户所占的份额总会渐渐下降的。观察一下，此时使用IE7打开刚刚index.htm可以发现，本来非常完美而且不需要做任何改动的页面在IE7下也加载得特别慢，看来behaviro属性也影响到了IE7，让IE7也做了繁重的无用功。
此时我们的目标是将IE7解放出来，查阅各种浏览器的hack，发现只有IE6在CSS中能够认识下划线“_”，所以我们在刚刚的CSS样式中的behaviro前加上一个下划线。而这个下划线无论是FF或者IE7都是不会去解析的，这样IE7就会忽略这个CSS属性，既而解放了IE7。
方案二：既然此次处理的目标就是IE6浏览器，所以在首页中的JS加载语句也可以加上一个小小的改动，加上“<!--[if IE 6]><![endif]-->”标签，既而只针对IE6，而解放了其他浏览器，使它们在页面加载时就忽略iepngfix_tilebg.js这个文件，提高效率。而可怜的IE6，让它接受暴风骤雨般的CPU消耗吧，没办法，爱莫能助了。
|
相关推荐
易语言PNG图片透明背景源码例程程序结合易语言扩展界面支持库和应用接口支持库，调用API函数实现PNG图片作为窗口的透明背景。点评：本源码是易语言PNG图片的应用实例。 @易语言难学吗。
1、支持加载文件中的PNG图片作为背景 2、支持透明的Static控件 3、支持透明的Radio控件 4、支持透明的CheckBox控件 5、支持透明的GroupBox控件
VC++利用png图片做底图的漂亮窗口VC++利用png图片做底图的漂亮窗口
易语言PNG图片透明背景源码例程程序结合易语言扩展界面支持库和应用接口支持库，调用API函数实现PNG图片作为窗口的透明背景。点评：本源码是易语言PNG图片的应用实例。
主要以png图片作为背景，采用GDK+呈现不规则窗口。
在进行上位机开发的时候，我们经常会寻找带透明的PNG图片作为图标或背景图，但是网络上搜索到的大部分图片或素材网站免费提供的都不是PNG图片，还有自己编辑的图片也不具有透明层。此工具能够很好的选取底色并进行...
Visual C++6.0使用GDI+的一般方法 1． 载解压GDI+开发包； 2． 正确设置include & lib 目录； 3． stdafx.h 添加： #ifndef ULONG_PTR #define ULONG_PTR unsigned long* ...编译并运行，结果如图：
.9.png图片其实就是png格式图片，不过它比普通的png图片外围多了1px（像素）的边框，另外就是使用这种格式的图片可以实现背景自适应大小且不失真的效果。比如某些控件横竖屏切换后控件的样子就变形了，或者某些图片...
完美解决ie6下png不兼容问题，无论是作为背景还是插入图片
基于QT5.4实现栅格（png格式）的画图板程序，实现多边形，折线，点的画笔，填充颜色的自定义、放大缩小和图形的保存打开等。 基于QT5.4实现栅格（png格式）的画图板程序，实现多边形，折线，点的画笔，填充颜色的...
查找了很久，发现是图片格式问题，把png格式的转换成gif的就没有问题了。。。。 附相关代码，主要是html的： 复制代码代码如下: <style type=”text/css”> .select{ width:180px; height:29px; overflow:...
MFC实现的美化进度条控件，采用PNG图片作为背景和滑块的GDI画图模式，本程序通过两张png透明图的贴图方式构建出进图条的样式！
图片作为背景，并且是链接的写法。例如网站的logo图片。例如：土豆的logo图片 土豆网 a {display: block;width: 170px;height: 42px;text-indent: -9999px;background: url(/skin/__g/img/ui/nav...<a><span>链接背景图
这是一款使用纯CSS3制作的背景透明的Speech Bubbles对话气泡特效。该对话气泡使用两张透明的png图片来作为背景，通过简单的CSS代码来将它们组合为一个对话气泡效果。
快速创建透明的 PNG，以在网页设计中重复背景。 rgba()很棒，但遗憾的是它在旧浏览器中不起作用……特别是 IE8。 我会让你决定是否要支持 IE8，但有时你别无选择。 有很多后备，但重复的、透明的 PNG 是非常可靠的...
平面游戏开发时，需要使用的竹盆-盘子背景图素材包，png透明图素材，拖入即可使用，作为游戏制作的竹盆-盘子背景图，内含多种样式素材。
像验证码或根据动态数据生成统计图标，以及前面介绍的一些GD库操作等都属于动态绘制图像。而在web开发中，也会经常去处理服务器中已存在的图片。...但如果需要对自己已有的图片进行处理，只要将这个图片作为画布资源即
在窗格的滚动条处单击鼠标右键，系统将会弹出快捷菜单，如图1所示。 从该快捷菜单中选择“属性”菜单项，打开“窗格属性”对话框，从“背景”列表中选择一个图像后，单击“确定”按钮即可导入背景图像。若要选择...