CSS3草案中定義了{opacity: | inherit;}來聲明元素的透明度，這已經得到了大多數現代瀏覽器的支援，而IE則很早通過特定的私人屬性filter來實現的，所以HTML元素的透明效果已經無處不在了。首先看看A級瀏覽器所支援的用CSS實現元素透明的方案：
| 瀏覽器 | 最低 版本 |
方案 |
|---|---|---|
| Internet Explorer | 4.0 | filter: alpha(opacity=xx); |
| 5.5 | filter: progid:DXImageTransform.Microsoft.Alpha(opacity=xx); |
|
| 8.0 | filter: "alpha(opacity=xx)"; |
|
| Firefox (Gecko) | 0.9 (1.7) | opacity |
| Opera | 9.0 | opacity |
| Safari (WebKit) | 1.2 (125) | opacity |
實際上在IE8中，-ms-filter是filter的別名，兩者區別是-ms-filter的屬相值必須被單引號或雙引號包圍，而filter中則不是必須，而在IE8之前的版本中，filter的屬性值必須不被單引號或雙引號包圍。
IE中的HTML元素要實現透明，則其必須具備layout，這樣的元素有僅可讀的屬性hasLayout，且其值為true。具體情況如下：
body、img、table、tr、th、td等元素的hasLayout一直為true。 type為text、button、file或select的input的hasLayout一直為true。 {position:absolute}的元素的hasLayout為true {float:left|right}的元素的hasLayout為true {display:inline-block}的元素的hasLayout為true {height:xx}或{width:xx}的元素必須具體以下兩個條件之一，其hasLayout才能為true：
display的值是block，如demo3就不行。 {zoom:xx}的元素在IE8的相容模式或IE8之前的瀏覽器中其hasLayout為true，但在IE8的標準模式下則不會觸發hasLayout。 {writing-mode:tb-rl}的元素的hasLayout為true。 contentEditable的屬性值為true。 {display:block}的元素的hasLayout一直為true，如demo8。 關於hasLayout的更多詳情可以看Exploring Internet Explorer “HasLayout” Overview和On having layout
從上面就可以看出IE實現HTML元素的透明如此混亂，為了向下相容和自己的私人屬性讓IE上實現元素透明有多種方式，比如CSS Opacity執行個體中的demo1到demo8，雖然IE團隊推薦實現透明的方式是：
{ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); opacity: .5;}而目前簡單最好用的實現方式是如CSS Opacity中demo4這樣：
{ filter:alpha(opacity=30); opacity:.3;}實際上目前最流行的JavaScript架構的設定樣式方法都是應用這種方式，並且針對IE設定了{zoom:1}來讓元素的hasLayout為true，但在IE8的標準模式下zoom並不能觸發hasLayout，所以利用它們設定hasLayout為false的元素的透明度時在IE8的標準模式下是失敗的，這個bug在YUI（我已經給YUI團隊提交了這個bug，他們會在下個版本修複，最新的2.8.0中依舊存在，期待2.9.0吧）、Prototype、jQuery和Mootools的最新版本中都存在，具體請在IE8標準模式下看demo9到demo11。同樣由於在IE8中設定透明度的方式多種多樣，所以利用JavaScript擷取HTML元素的透明度值需要考慮多種情況，YUI完美解決了這個問題，Prototype比jQuery稍微周全一點，而Mootools直接是bug，具體可以在IE下看demo1到demo8的示範。從這個角度給4個架構來個排名的話，YUI第一、Prototype第二、jQuery第三、Mootools墊底。
我簡單的實現了設定和擷取Opacity的函數，可以避開上面架構存在的bug，請在IE8標準模式下看demo12：
//設定CSS opacity 屬性的函數，解決IE8的問題var setOpacity = function(el,i){ if(window.getComputedStyle){// for non-IE el.style.opacity = i; }else if(document.documentElement.currentStyle){ // for IE if(!el.currentStyle.hasLayout){ el.style.zoom = 1; } if(!el.currentStyle.hasLayout){ //在IE8中zoom不生效，所以再次設定inline-block el.style.display = 'inline-block'; } try{ //測試是否已有filter //http://msdn.microsoft.com/en-us/library/ms532847%28VS.85%29.aspx if(el.filters){ if(el.filters('alpha')){ el.filters('alpha').opacity = i * 100;}else{ el.style.filter += 'alpha(opacity='+ i * 100 +')'; } } }catch(e){ el.style.filter = 'alpha(opacity='+ i * 100 +')'; } }}//擷取CSS opacity 屬性值的函數//借鑒自http://developer.yahoel.com/yui/docs/YAHOO.util.Dom.html#method_getStylevar getOpacity = function(el){ var value; if(window.getComputedStyle){ value = el.style.opacity; if(!value){ value = el.ownerDocument.defaultView.getComputedStyle(el,null)['opacity']; } return value; }else if(document.documentElement.currentStyle){ value = 100; try { // will error if no DXImageTransform value = el.filters['DXImageTransform.Microsoft.Alpha'].opacity; } catch(e) { try { // make sure its in the document value = el.filters('alpha').opacity; } catch(err) { } } return value / 100; }}附:彈出註冊框執行個體 <!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=utf8" /> <title>彈出提示</title> <mce:style><!-- * {margin:0;padding:0;font-size:12px;} html,body {height:100%;width:100%;} #content {background:#f8f8f8;padding:30px;height:100%;} #content a {font-size:30px;color:#369;font-weight:700;} #alert {border:1px solid #369;width:300px;height:150px;background:#e2ecf5;z-index:1000;position:absolute;display:none;} #alert h4 {height:20px;background:#369;color:#fff;padding:5px 0 0 5px;} #alert h4 span {float:left;} #alert h4 span#close {margin-left:210px;font-weight:500;cursor:pointer;} #alert p {padding:12px 0 0 30px;} #alert p input {width:120px;margin-left:20px;} #alert p input.myinp {border:1px solid #ccc;height:16px;} #alert p input.sub {width:60px;margin-left:30px;} --></mce:style><style mce_bogus="1"> * {margin:0;padding:0;font-size:12px;} html,body {height:100%;width:100%;} #content {background:#f8f8f8;padding:30px;height:100%;} #content a {font-size:30px;color:#369;font-weight:700;} #alert {border:1px solid #369;width:300px;height:150px;background:#e2ecf5;z-index:1000;position:absolute;display:none;} #alert h4 {height:20px;background:#369;color:#fff;padding:5px 0 0 5px;} #alert h4 span {float:left;} #alert h4 span#close {margin-left:210px;font-weight:500;cursor:pointer;} #alert p {padding:12px 0 0 30px;} #alert p input {width:120px;margin-left:20px;} #alert p input.myinp {border:1px solid #ccc;height:16px;} #alert p input.sub {width:60px;margin-left:30px;} </style></head><body> aa<div id="content"> <a href="#" mce_href="#" style="position:absolute; top:50%; left:50%">註冊</a> </div> <div id="alert"> <h4><span>現在註冊</span><span id="close">關閉</span></h4> <p><label>使用者名稱</label><input type="text" class="myinp" onmouseover="this.style.border='1px solid #f60'" onfoucs="this.style.border='1px solid #f60'" onblur="this.style.border='1px solid #ccc'" /></p> <p><label>密 碼</label><input type="password" class="myinp" onmouseover="this.style.border='1px solid #f60'" onfoucs="this.style.border='1px solid #f60'" onblur="this.style.border='1px solid #ccc'" /></p> <p><input type="submit" value="註冊" class="sub" /><input type="reset" value="重設" class="sub" /></p> </div> <mce:script type="text/javascript"><!-- var myAlert = document.getElementById("alert"); var reg = document.getElementById("content").getElementsByTagName("a")[0]; var mClose = document.getElementById("close"); reg.onclick = function() { myAlert.style.display = "block"; myAlert.style.position = "absolute"; myAlert.style.top = "50%"; myAlert.style.left = "50%"; myAlert.style.marginTop = "-75px"; myAlert.style.marginLeft = "-150px";mybg = document.createElement("div"); mybg.setAttribute("id","mybg"); mybg.style.background = "#E0ECF8"; mybg.style.width = "100%"; mybg.style.height = "100%"; mybg.style.position = "absolute"; mybg.style.top = "0"; mybg.style.left = "0"; mybg.style.zIndex = "500"; mybg.style.opacity = "0.3"; mybg.style.filter = "Alpha(opacity=30)"; document.body.appendChild(mybg);document.body.style.overflow = "hidden"; }mClose.onclick = function() { myAlert.style.display = "none"; mybg.style.display = "none"; } // --></mce:script> </body> </html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
