半透明效果有時(shí)候會(huì)給頁(yè)面增加不少色彩，特別是Vista盛行之后，半透明效果更加受推崇。在諸多可用于Web瀏覽的圖片格式中，只有PNG格式和Gif格式可以實(shí)現(xiàn)半透明效果，不過(guò)Gif格式的半透明效果很有限，而且會(huì)大范圍失真，所以目前最流行的方式就是使用PNG格式圖片。不過(guò)可惜的是，在Internet Explorer 6及以下版本中都不支持PNG半透明效果（至少是不直接支持）。不過(guò)幸好Microsoft在這些瀏覽器中內(nèi)置了其他的功能，可以幫助我們來(lái)實(shí)這種半透明的效果。

1.使用CSS實(shí)現(xiàn)

一、現(xiàn)代瀏覽器中半透明效果的實(shí)現(xiàn)
首先要有一張半透明的PNG格式圖片，這個(gè)制作很簡(jiǎn)單，在Photoshop中新建一個(gè)文件，在該文件中新建一個(gè)圖層填充白色，然后調(diào)節(jié)透明度，刪除背景，保存為PNG格式即可。你也可以下載這個(gè)PNG文件使用。我們要做的工作很簡(jiǎn)單：只要把這個(gè)PNG圖片指定為某個(gè)<div>的背景即可。例如可以使用下面的CSS規(guī)則：

body {
background:black url(bg.jpg) no-repeat 0 0;
text-align:center;
}
div {
width:80%;
margin:0 auto;
text-align:left;
padding:7px;
background-image:url(tran.png);
border:3px solid #fff;
}

二、在Internet Explorer 6中的實(shí)現(xiàn)
Internet Explorer中提供了提供了獨(dú)有的濾鏡效果，他通過(guò)filter:progid:DXImageTransform.Microsoft.AlphaImageLoader實(shí)現(xiàn)，現(xiàn)在是關(guān)于這個(gè)屬性的有關(guān)知識(shí)：

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ì)作用。

特性：
Enabled :　可讀寫(xiě)。布爾值(Boolean)。參閱 enabled 屬性。
sizingMethod :　可讀寫(xiě)。字符串(String)。參閱 sizingMethod 屬性。
src :　可讀寫(xiě)。字符串(String)。參閱 src 屬性。

說(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)容。
因此在Internet Explorer 6 中我們還要加上現(xiàn)在這段話:

* html div {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="tran.png");
background:none;
}

注意：這里我們使用了 “*”的CSS hack，這個(gè)CSS Hack是Internet Explorer 6獨(dú)有的，在Ineternet Explorer 6的DOM結(jié)構(gòu)中，默認(rèn)HTML的父節(jié)點(diǎn)為*，而在標(biāo)準(zhǔn)的DOM結(jié)構(gòu)中HTML就是根節(jié)點(diǎn)。所以上面的CSS 規(guī)則只有Internet Explorer 6 認(rèn)識(shí)。
這樣，我們?cè)贗nternet Explorer 6、7、Firefox、Opera等最常用的瀏覽器的都實(shí)現(xiàn)了半透明效果了。

2.使用JS實(shí)現(xiàn)

3.使用JQuery實(shí)現(xiàn)

<1>引入JQuery

 <2>使用

<script type="text/javascript" src="jquery-latest.pack.js"></script>
<script type="text/javascript" src="jquery.pngFix.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
  $(document).pngFix();
});
</script>


• 透明