應(yīng)用PNG圖片的透明或半透明的特性能做出非常漂亮的網(wǎng)頁(yè)來(lái)。Firefox和Opera對(duì)PNG的支持非常的好，都是IE卻無(wú)視PNG圖片這一特性的“存在”，雖然IE7已經(jīng)支持都是IE6還是不行。查了一些資料，基本解決了這一問(wèn)題，準(zhǔn)備應(yīng)用到PJskin上。
雖然有讓IE6支持PNG透明背景的JS程序，都是不是很方便，還是用CSS來(lái)實(shí)現(xiàn)的好。使用到的就是：
IE5.5+的AlphaImageLoader濾鏡
引用內(nèi)容
語(yǔ)法：
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )
屬性：
enabled : 可選項(xiàng)。布爾值(Boolean)。設(shè)置或檢索濾鏡是否激活。true | false
true : 默認(rèn)值。濾鏡激活。
false : 濾鏡被禁止。
sizingMethod : 可選項(xiàng)。字符串(String)。設(shè)置或檢索濾鏡作用的對(duì)象的圖片在對(duì)象容器邊界內(nèi)的顯示方式。 crop : 剪切圖片以適應(yīng)對(duì)象尺寸。
image : 默認(rèn)值。增大或減小對(duì)象的尺寸邊界以適應(yīng)圖片的尺寸。
scale : 縮放圖片以適應(yīng)對(duì)象的尺寸邊界。
src : 必選項(xiàng)。字符串(String)。使用絕對(duì)或相對(duì) url 地址指定背景圖像。假如忽略此參數(shù)，濾鏡將不會(huì)作用。
說(shuō)明：
在對(duì)象容器邊界內(nèi)，在對(duì)象的背景和內(nèi)容之間顯示一張圖片。并提供對(duì)此圖片的剪切和改變尺寸的操作。如果載入的是PNG(Portable Network Graphics)格式，則0%-100%的透明度也被提供。
PNG(Portable Network Graphics)格式的圖片的透明度不妨礙你選擇文本。也就是說(shuō)，你可以選擇顯示在PNG(Portable Network Graphics)格式的圖片完全透明區(qū)域后面的內(nèi)容。
圓角頭像的制作原理就是在頭像上覆蓋一張透明的圖片，把四個(gè)角顏色設(shè)置成頁(yè)面的背景顏色，中間透明.這里需要注意的是需要把圖片保存成24位的png，雖然IE6支持8位的png的透明，但是8位的png做透明圓弧圖片存在效果上的問(wèn)題，就是存在白色的雜邊或鋸齒，24位的png或32位的png的圓弧透明（半透明）圖片則非常光滑，但是該死的IE6不支持24位的png或32位的png透明(其他瀏覽器都支持).
需要注意的是：
- 使用 AlphaImageLoader 篩選器的元素必須有寬高，width:XXpx; height:XXpx;
- ie6下必須充值背景為none，_background:none
<!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>無(wú)標(biāo)題文檔</title>
<style>
<!--
body{background:#000;}
.divbg{width:154px; height:197px; margin:50px auto; position:relative;}
.divbg img{position:relative; top:0; left:0; display:block;}
.divbgpic{background:url(bg.png) no-repeat 0 0; _background:none; position:absolute; top:0; left:0; width:154px; height:197px; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.png',sizingMethod='crop'); cursor:pointer}
-->
</style>
</head>
<body>
<div class="divbg"><img src="cartoon_pic.jpg" alt="" /><span class="divbgpic"></span></div>
</body>
</html>
