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 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里面写的用作背景的图片,需要在
<!--[if gte IE 5.5000]><script type="text/javascript" src="js/pngfix.js"></script><![endif]-->
pngfix.js文件的程序代码
{
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);