CSS 過濾器 兼容ie，火狐和谷歌

這篇彙總主要是提供一些CSS不透明的詳細介紹，代碼示例和解釋，以實現這項有用的CSS技術在您的項目中兼容全部瀏覽器。 

 

　　關於CSS 透明度，有一點須要注意的是，它雖然使用了不少年，但它一直以來都不是一個標準屬性。它是一種非標準技術，應該是CSS3規範的一部分。 

 

1. 舊的Opacity設置 

 

　　如下代碼是Firefox和Safari舊版本所需的透明度設置: 

 

#myElement {      -khtml-opacity: .5;      -moz-opacity: 0.5;  }  

　　-khtml-opacity設置是針對舊版本的Webkit渲染引擎，這種專用屬性如今已通過時了，除非你還有須要兼容Safari 1.x.的用戶。 

 

第二行使用專用屬性 -moz-opacity是 爲了兼容Mozilla渲染引擎的早期版本，以及追溯到Netscape Navigator。Firefox 0.9之後就不要求使用-moz-opacity屬性，Firefox 3.5（如今使用Gecko引擎）已經不在支持這個屬性。 

 

2. 在Firefox, Safari, Chrome和Opera下的CSS透明度 

 

　　如下代碼是除了IE外的全部當前瀏覽器的最簡單，最最新的不透明度設置的CSS語法： 

 

#myElement {      opacity: .7;  }  

　　上述語法將設置一個元素爲70％不透明（或30%透明）。設置opacity:1將使元素不透明，而設置opacity:0將使得元素徹底不可見。你 只要記住「opacity」等同於「不透明」就很容易記住了，opacity值越小就越接近透明。 

 

　　opacity屬性能夠精確地小數點後兩位，因此值取「.01」和「.02」其實是不一樣的，雖然可見度很難被發覺。通常狀況下，精確到一位就能夠了，取值如「.3」或「.7」。 

 

3. IE下的CSS透明度 

 

　　IE下照舊有別於其餘瀏覽器，而且目前也有三個不一樣版本的IE在普遍使用，透明度設置是不一樣的，有時須要額外的CSS來控制： 

 

#myElement {      filter: alpha(opacity=40);  }  

　　上面的CSS使用專用的filter屬性來設置IE6-8透明度。對於IE6和IE7須要注意：爲了使得透明設置生效，元素必須是「有佈局」。一個元素能夠經過使用一些CSS屬性來使其被佈局，有如width 和 position。關於微軟專有的hasLayout屬性詳情，以及如何觸發它，參考這裏。 

 

　　另一個設置IE8的CSS透明度的方法語法以下（注意註釋中指出的版本）： 

 

 

#myElement {      filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);     /* 第一行在IE6, IE7和IE8下有效 */     -ms-filter:       "progid:DXImageTransform.Microsoft.Alpha(opacity=40)";    /*第二行僅在IE8下有效 */}  

　　第一行代碼針對當前全部IE版本，第二行僅針對IE8。 

 

　　注意兩行代碼的不一樣之處：在第二行代碼中，在filter屬性前跟着-ms-前綴，而且屬性值有加引號，這些都是語法所必須的。 

 

　　說實在，有了如前一個例子中用alpha(opacity=40)的語法來做用於任何版本的IE下的任何有佈局的元素以後，我也不肯定是否還有必要用「progid」的方法。 

 

4. 使用JavaScript設置和改變CSS透明度 

 

　　您可使用下面的語法訪問JavaScript中的CSS opacity 屬性： 

 

document.getElementById("myElement").style.opacity = ".4";  // 針對全部現代瀏覽器  document.getElementById("myElement").style.filter = 　　 "alpha(opacity=40)";// 針對IE 

　　上面的代碼可使用行內循環或者其餘動態函數遞增修改透明度的值。固然，你必須先經過特徵檢測來決定使用哪一行代碼。 

 

5. 使用JQuery設置和改變CSS透明度 

 

　　直接使用jQuery設置CSS透明度更直觀更容易實現，由於在全部瀏覽器代碼都同樣，而且你沒必要擔憂在IE下元素是否「haslayout」： 

 

$("#myElement").css({ opacity: .4 }); // 全部瀏覽器有效 

　　您也可使用一下jQuery代碼使一個元素動畫透明： 

 

$("#myElement").animate({      opacity: .4      }, 1000, function() {      // 動畫完成，全部瀏覽器下有效  });  

　　無論元素的透明度在動畫開始時是多少，它都會漸變到透明度爲「.4」。動畫的速度經過值「1000」設定，動畫時間以毫秒爲單位。代碼中的最後一個屬性是一個可選回調函數，將在動畫完成後執行。 

 

　　若是該元素的透明度在CSS中已經設定爲「.4」，那在動畫運行的時候，你將不會發覺有任何不一樣，因此動畫開始和最終透明度要有所不一樣。 

 

6. 經過 RGBA的透明度 

 

　　另外一個CSS3技術只支持部分新的瀏覽器（Firefox 3+, Opera 10.1+, Chrome 2+,Safari 3.1+），可經過RGBA的alpha通道的方式設定。語法以下： 

 

#rgba {      background: rgba(98, 135, 167, .4);  } 

　　在上面的定義中，經過RGB（前三個數字）給背景設定顏色，而後最後一個是alpha設置，以執行給定顏色的透明度。這個alpha設置跟opacity 屬性同樣，可設定任何0到1的數字，精確獲得兩位小數點。數字值越大，就越接近徹底不透明的顏色。 

 

7. 經過 HSLA的透明度 

 

　　相似以前的定義，CSS3還容許使用HSLA單獨設置顏色和alpha值，HSLA表示Hue（色調）, Saturation（飽和度）, Lightness（亮度）, 和Alpha。如下是HSLA透明的例子： 

 

#hsla {      background: hsla(207, 38%, 47%, .4);  }  

　　更多關於HSLA顏色的解釋，參考這篇來自W3.org的文章。如同RGBA透明度，最後的數字表示透明度設置，跟RGBA起一樣的做用。注意RGBA和HSLA透明度的一個重要的好處是這些透明度設置不會影響到子元素的，但經過opacity屬性的方式則會。alpha設置的RGBA和HSLA隻影響背景顏色的透明度，僅此而已。