NG半透明背景图片效果
PNG图片在网页设计中扮演着一个很重要的角色，利用PNG图片的特点可以制作出实用,绚丽的效果，可是对于PNG图片的支持却不是很理想，Firefox和Opera对PNG支持的比较好，特别是Firefox浏览器。可是IE却不理PNG,使得设计者无法很随意的使用png图片。
IE5.5+的 AlphaImageLoader滤镜为通向png提供了一个道路，如果他载入的是PNG(Portable Network Graphics)格式，则0%-100%的透明度也被提供。我们就利用这个滤镜和hack来设计一个半透明png背景图片的模型。
经过多方面的实验比较了2种方法：css控制和js控制。总结如下：
css中镶入如下代码控制：
#png{background-image:url(images/jzz_02.png) no-repeat !important;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled="true", sizingMethod="scale", src="images/jzz_02.png");
background:none;}
比较累，需要一个个添加代码。而且用了滤镜后背景图片不支持background-position定位
具体代码：
//总css文件 style.css
#png{
background:url(image.png) no-repeat center !important;
}
//CSS代码中镶入ie6配置CSS配置文件 ie6.css
#png{
background:none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png',enabled='true', sizingMethod='scale');
}
//html格式
<head>
...
<link href="style.css" rel="stylesheet" type="text/css" />
<!--[if IE 6]>
<link href="ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
...
注：style.css文件里的图片url是相对于css文件的路径，ie6.css文件里src是相对于html文件的路径
JS控制：
比较方便，适合懒人- -！，但bug比较多，效率相对于css要低
比较常用的js代码：
1.
correctpng.js
// JavaScript Document
function correctPNG()
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i]
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
i = i-1
}
}
}
function alphaBackgrounds(){
var rslt = navigator.appVersion.match(/MSIE (d+.d+)/, '');
var itsAllGood = (rslt != null && Number(rslt[1]) >= 5.5);
for (i=0; i<document.all.length; i++){
var bg = document.all[i].currentStyle.backgroundImage;
if (bg){
if (bg.match(/.png/i) != null){
var mypng = bg.substring(5,bg.length-2);
//alert(mypng);
document.all[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+mypng+"', sizingMethod='crop')";
document.all[i].style.backgroundImage = "url('')";
//alert(document.all[i].style.filter);
}
}
}
}
html
<head>
...
<script type="javascript" src="correctpng.js"></script>
<!--[if IE 6]>
<script>
if (navigator.platform == "Win32" && navigator.appName == "Microsoft Internet Explorer" && window.attachEvent) {
window.attachEvent("onload", correctPNG);
window.attachEvent("onload", alphaBackgrounds);
}
</scrpit>
<![endif]-->
</head>
注 这个js方法不支持重复背景，如果背景重复的话就只能显示一个，别的都支持。
2.
使用先人写好的iepngfix类
这个类里面有3个文件
blank.gif替换为空白的图片
iepngfix.htc核心文件
iepngfix_tilebg.js貌似是控制重复背景的文件，不过我用了以后直接页面都显示不出- -!
具体用法：
在css文件里加入
img,div{
behavior: url("iepngfix.htc") ;
}
在html里head之间调用iepngfix_tilebg.js
注意最好blank.gif和htc文件放一个文件夹里 习惯都放在image文件夹里
总结：我个人认为使用css文件会比较好点，这对程序美观度和效率都会有一定的提高。
总结完毕。
==================================================================
另外的方法
新建一个叫png_fix.css的文件，内容如下：
* html img,* html .png {
behavior: expression(( this.runtimeStyle.behavior = "none") &&(
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 =
"image/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 )
);
}
然后在HTML文件的<LINK>部分加入<>
最后自己做一个1×1像素的透明gif图片，存为transparent.gif。
使用的时候是这样：
1、如果是在HTML里面直接插入的PNG图片，就直接会处理掉；
2、如果是在css里面写的用作背景的图片，需要在
里面加上class="png"，最后就是
；
3、如果是链接，需要加上cursor: pointer；
测试下来使用没有问题，非常完美。
=========================================================================
亲测成功的方法
把下面的代码放在head区就可以解决问题了。
<!--[if gte IE 5.5000]><script type="text/javascript" src="js/pngfix.js"></script><![endif]-->
pngfix.js文件的程序代码
function
correctPNG()
{
for
(
var
i
=
0
; i
<
document.images.length; i
++
)
{
var
img
=
document.images[i]
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
i
=
i
-
1
}
}
}
window.attachEvent(
"
onload
"
, correctPNG);
分享到：
相关推荐
IE6不兼容png透明背景解决方法，有效解决IE6下 透明图片浅灰背景的问题
js修复IE不能显示PNG图片透明背景的方法、解决浏览器不兼容的问题
完美解决IE6下png背景、图片透明问题
解决ie6的不兼容alpha透明通道，使png图片ie6显示不再一片蓝边 此处我添加了个body的png透明背景，使效果看起来更明显 放在页面中时，可将body样式去除，应用到自己所需要的兼容的图片中 测试时记得使用ie6测试
IE6下PNG背景透明的方法IE6下PNG背景透明的方法IE6下PNG背景透明的方法IE6下PNG背景透明的方法IE6下PNG背景透明的方法
一共4个demo，其中 1，demo-CSS只是普通的样式，没有实现ie6透明， 2，js-png通过js文件（unitpngfix）实现了透明，但是ie6...4，最后，demo-DD，此方法完美解决，不过需要在设置png背景的div上添加class=“png”的类。
DD_belatedPNG完美地解决了“iepngfix.htc”会出现的无法平铺，没法定位以及所加超链接的点击区域无法使用等问题！
IE6PNG透明背景显示灰色--解决方法（IE7.js）
易语言PNG图片透明背景源码,PNG图片透明背景,释放字节流,创建字节流,取字节流指针,取字节流尺寸,取出字节集,置窗口PNG外型,Gdiplus_初始化,GdipCreateFromHDC,GdipLoadImageFromFile,GdipLoadImageFromStream,...
js_IE6支持png透明解决png_ie6下不透明背景图片
解决IE6 PNG图片透明问题解决IE6 PNG图片透明问题解决IE6 PNG图片透明问题解决IE6 PNG图片透明问题解决IE6 PNG图片透明问题
IE6PNG透明背景显示灰色--解决方法（unitpngfix.js）
内含插件及使用说明 ie(IE)png半透明插件使用微软的VML语言对PNG图片进行重新绘制，以达到半透明的效果，并且能支持background-position和background-repeat属性。
由于IE7以下不支持图片的背景的透明.根据IE特性,我们可以用IE的滤镜来实现透明处理 你只要包含下面这个pngfix.js文件就行,如下: <!--[if lt IE 7]> <script defer type="text/javascript" src="/Js/pngfix.js"> ...
易语言PNG图片透明背景源码例程程序结合易语言扩展界面支持库和应用接口支持库，调用API函数实现PNG图片作为窗口的透明背景。点评：本源码是易语言PNG图片的应用实例。 @易语言难学吗。
莫名其妙的问题，IE 看网页中的部分图片是红叉，同样的网址，Firefox 中正常。...【IE无法显示png图片 IE部分图片显示为叉叉的解决办法】 http://www.cnblogs.com/oskycar/archive/2009/06/24/1510054.html
易语言PNG图片透明背景源码.rar
处理ie6下png格式图片透明的效果，及处理完之后再ie6下碰到的情况及建议。
ie 下png 透明图片 兼容解决方案
IE6中png透明效果显示 IE6下PNG背景透明的显示问题 让IE6显示透明PNG背景图片