CSS opacity - 實作圖檔半透明效果

在CSS中有一個Alpha濾鏡，這個濾鏡可以設定目标元素的透明度。還可以通過指定坐标，進而實作各種不同範圍的透明度。具體文法如下： {filter: alpha(opacity=#opacity,finishopacity=#finishopacity,style=#style,startx=#startx,starty=#starty,finishx=#finishx,finishy=#finishy)} 具體參數含義如下： opacity 透明度。預設的範圍是從0 到 100，他們其實是百分比的形式。也就是說，0代表完全透明，100代表完全不透明。 finishopacity 是一個可選參數，如果想要設定漸變的透明效果，就可以使用他們來指定結束時的透明度。範圍也是0 到 100。 style   指定透明區域的形狀特征：0 代表統一形狀，1 代表線形，2 代表放射狀，3 代表矩形 startx   漸變透明效果開始處的 X坐标。 starty   漸變透明效果開始處的 Y坐标。 finishx 漸變透明效果結束處的 X坐标。 finishy 漸變透明效果結束處的 Y坐标。 以上的參數可以選用，可以隻設定一個opacity 例如： {filter:alpha(opacity=50)} 這個就是半透明的設定，隻要把{}中的代碼加入到需要設定的模版中的{}的即可，記得與前面的代碼之間要用";"間隔，不然設定是無效的 例如： 我要設定模版區域背景的顔色（白色）+半透明 隻要在 .modbox{} .modbl{} .modbc{} .modbr{} 中都設定background-color:white 這些就是模版背景設定的ID 然後再在.modbox,.modbl,.modbc,.modbr{}如果沒有這個的話可以自己加一個 中加入filter : alpha(opacity=80)就可以達到所有模版的背景都是半透明的效果了 如果希望像我這樣隻顯示blog的背景，别的都全透明的話，那麼就在别的模版中加入背景全透明的代碼即可 background:transparent                       這就是背景全透明的代碼 不過這樣的話，相關模版的主要區域是透明了，可是底下還會有一條顔色留着的，是以另外還要在 .modbl{} .modbc{} .modbr{} 中也加入背景全透明的代碼，這樣才能讓模版區域完全透明，就像我現在的效果一樣 另外這個參數目前隻能用于背景色的設定，背景圖檔也可以設定為半透明 我把我的背景半透明代碼貼出來吧 .modbox{padding:10px 10px 0 10px;background-color:#FFFFFF;border-left:1px solid #813533;border-right:1px solid #813533} .modbl{background:transparent;border-left:1px solid #813533;border-bottom:1px solid #813533;line-height:1px} .modbc{background:transparent;border-bottom:1px solid #813533;line-height:1px} .modbr{background:transparent;;border-right:1px solid #813533;border-bottom:1px solid #813533;line-height:1px} .modbox,.modbl,.modbc,.modbr{filter:alpha(opacity=80);-moz-opacity:0.8;width:auto !important;width:100%} 這個效果在IE和Mozilla浏覽器上都可以工作，代碼如下 <img alt="powerbookg4.jpg" src="archives/images/powerbookg4.jpg" width="250" height="60" style="-moz-opacity:0.5; filter:alpha(opacity=50);cursor:hand;" οnmοuseοver="this.style.MozOpacity=1; this.filters.alpha.opacity=100" οnmοuseοut="this.style.MozOpacity=0.5; this.filters.alpha.opacity=50"> 在IE中需要通過"filter"來定義透明度"opacity"，而在Mozilla中是可以直接解析"opacity",是以如果要使得這個效果在兩種浏覽器中都得到支援，需要把兩種設定都加進去。針對IE的設定：this.filters.alpha.opacity=50　而針對Mozilla的設定：this.style.MozOpacity=0.5.　大家可以直接用這行代碼給圖檔定義，隻須修改圖檔位址就能實作上圖效果。