css透明詳解

原文:http://www.cnblogs.com/zhengchuyu/archive/2008/07/30/1256890.html

 

透明往往能產生不錯的網頁視覺效果，先奉上相容主流瀏覽器的CSS透明代碼:

.transparent_class {filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity: 0.5;opacity: 0.5;}

上面的幾個屬性分別是:

• opacity: 0.5; 這是最重要的，因為它是CSS標準.該屬性支援firefox, Safari和 Opera.
• filter:alpha(opacity=50); 這個是為IE6設的，可取值在0-100，其它三個0到1.
• -moz-opacity:0.5; 這個是為了支援一些老版本的Mozilla瀏覽器。
• -khtml-opacity: 0.5; 這個為了支援一些老版本的Safari瀏覽器。

CSS透明度繼承問題

但CSS的透明屬性涉及到一個繼承問題，當為父級元素設定透明度後，子項目將自動繼承其透明度，比如本站的一個效果:

即使你又為子項目指定透明度為1也是無效的。

對於子項目是文字的情況，我的解決方案一般是如果多少還能夠看清，就不管。另一個折衷的方法是，為文本子項目指定一個相對更深的顏色。也就是說，當子項目繼承透明度後，所得到的文本顏色正好就是你想要的。前提是，這個顏色還有加深的可能，和需要詳細的計算顏色和透明度的值。

還有“取消透明度繼承”的說法，這個說法是不太準確的，據我個人所知，沒有任何取消透明度繼承的方法。只能說，當想要實現“多個元素覆蓋，只讓指定的元素透明”時，可以使用的一些Hack。

搜了一下，找到一個不錯的實現這種效果的方法 – 一個關於透明繼承度的問題，有興趣的朋友可以看看。原理很簡單，添加一個空元素作為透明層，和不想透明但是要實現覆蓋效果的元素為同級元素。父級元素使用position:relative定位; 兩個子項目使用position:absolute定位，實現覆蓋。

IE的Alpha濾鏡

 

想讓元素在ie中顯示30%的透明度可以在元素的css屬性列表中添加

 

filter:alpha(opacity=30);

 

通過ie的alpha濾鏡（alpha濾鏡有更加強大的功能，後面會提到）達到透明效果。

 

如果想通過JavaScript改變元素的透明度，有兩種方法：

 

obj.filters.alpha.opacity = value;

或者另一種比較直觀的方式

obj.style.filter = 'alpha(opacity=' + value + ')';

 

這裡要注意兩種方法中filter的單複數形式。其中第一種方法中filters對象是ie特有的對象，因此我們可以通過判斷filter對象是否存在來判定用戶端是否使用ie瀏覽器。

 

Firefox和Opera的opacity屬性

 

Firefox和Opera中沒有濾鏡（不知道我這樣理解是否正確），要令Firefox和Opera中的元素透明，可以使用一個ie沒有的css屬性：opacity。簡單地，我們可以在css列表中加入

 

opacity = 0.3;

 

注意，這裡opacity的最大值（即不透明）為1，而不是類似ie的alpha屬性中opacity參數一樣以100表示不透明。

 

想通過JavaScript改變透明度只需要使用通常改變css屬性的方法就行了。

 

CrossBrowers

 

最後我們根據上述區別，寫一個通用的（跨瀏覽器的）設定元素透明屬性的函數

 

function setOpacity(elem, level){
    if(elem.filters){ //如果是IE
        elem.style.filter = 'alpha(opacity=' + level + ')';
        //必須設定zoom,要不然透明度在IE下不生效  From:http://blog.csdn.net/dxx1988/article/details/6581430
        elem.style.zoom = 1;
    } else { //否則是W3C
        elem.style.opacity = level / 100;
    }
}

 

alpha更進一步

 

雖然僅僅只有ie支援濾鏡，但是這裡還是想進一步說說。畢竟這和ie的其他非相容性不同，濾鏡是ie的一個比較優秀的擴充，是標準之外的東西，而不是違反標準，我們甚至希望它能夠上升為標準，這樣我們就可以通過濾鏡簡單處理圖片做出更加漂亮的效果了。

 

執行個體代碼：

Code
<script type="text/javascript">
function setAlpha() {
    var temp = document.getElementById('test');
    val = parseInt(temp.filters.alpha.style);
    if(++val>3) val = 0;
    temp.filters.alpha.style = val;
}
</script>
<style type="text/css">
#test { 
width:300px; height:100px; border:1px solid #000; background-color:#0000FF; 
filter:alpha(opacity=100, finishopacity=0, style = 0); }
</style>
<div id="test"></div>
<input type="button" value="點擊查看三種效果" onclick="setAlpha()" />

 

除了效果裡使用到的 opacity / finishopacity / style 參數之外，還有 enable / startx / starty / finishx / finshy ，enable可以設定或檢索濾鏡是否啟用，其他四個和透明效果的起始位置有關，這裡就不贅述了。