本篇內(nèi)容主要講解“CSS實(shí)現(xiàn)HTML元素透明的方法”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“CSS實(shí)現(xiàn)HTML元素透明的方法”吧!

10年積累的成都網(wǎng)站制作、成都網(wǎng)站建設(shè)經(jīng)驗(yàn)，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識你，你也不認(rèn)識我。但先網(wǎng)站設(shè)計(jì)后付款的網(wǎng)站建設(shè)流程，更有澄邁免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

CSS是一組格式設(shè)置規(guī)則，用于控制Web頁面的外觀。通過使用CSS樣式設(shè)置頁面的格式，可將頁面的內(nèi)容與表現(xiàn)形式分離。HTML即超文本標(biāo)記語言或超文本鏈接標(biāo)示語言，是目前網(wǎng)絡(luò)上應(yīng)用最為廣泛的語言，也是構(gòu)成網(wǎng)頁文檔的主要語言。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字、圖形、動畫、聲音、表格、鏈接等。

CSS3草案中定義了

{opacity:<length> | inherit;}

來聲明元素的透明度，這已經(jīng)得到了大多數(shù)現(xiàn)代瀏覽器的支持，而IE則很早通過特定的私有屬性filter來實(shí)現(xiàn)的，所以HTML元素的透明效果已經(jīng)無處不在了。首先看看A級瀏覽器所支持的用CSS實(shí)現(xiàn)元素

實(shí)際上在IE8中，-ms-filter是filter的別名，兩者區(qū)別是-ms-filter的屬相值必須被單引號或雙引號包圍，而filter中則不是必須，而在IE8之前的版本中，filter的屬性值必須不被單引號或雙引號包圍。

IE中的HTML元素要實(shí)現(xiàn)透明，則其必須具備layout，這樣的元素有僅可讀的屬性hasLayout，且其值為true。具體情況如下：

1.body、img、table、tr、th、td等元素的hasLayout一直為true。

2.type為text、button、file或select的input的hasLayout一直為true。

3.設(shè)置{position:absolute}的元素的hasLayout為true

4.設(shè)置{float:left|right}的元素的hasLayout為true

5.設(shè)置{display:inline-block}的元素的hasLayout為true

6.設(shè)置{height:xx}或{width:xx}的元素必須具體以下兩個(gè)條件之一，其hasLayout才能為true：

a.IE8兼容模式和IE8以前的瀏覽器中，在標(biāo)準(zhǔn)(strict)模式下其display的值是block，如demo3就不行。

b.元素在怪癖模式（compat mode）下。

7.設(shè)置了{(lán)zoom:xx}的元素在IE8的兼容模式或IE8之前的瀏覽器中其hasLayout為true，但在IE8的標(biāo)準(zhǔn)模式下則不會觸發(fā)hasLayout。

8.設(shè)置了{(lán)writing-mode:tb-rl}的元素的hasLayout為true。

9.元素的contentEditable的屬性值為true。

10.在IE8標(biāo)準(zhǔn)模式下設(shè)置了{(lán)display:block}的元素的hasLayout一直為true，如demo8。

從上面就可以看出IE實(shí)現(xiàn)HTML元素的透明如此混亂，為了向下兼容和自己的私有屬性讓IE上實(shí)現(xiàn)元素透明有多種方式，比如CSS Opacity實(shí)例中的demo1到demo8，雖然IE團(tuán)隊(duì)推薦實(shí)現(xiàn)透明的方式是：

{  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);  opacity: .5;  }

而目前簡單***用的實(shí)現(xiàn)方式是如CSS Opacity中demo4這樣：

{  filter:alpha(opacity=30);  opacity:.3;  }

實(shí)際上目前***的JavaScript框架的設(shè)置樣式方法都是應(yīng)用這種方式，并且針對IE設(shè)置了{(lán)zoom:1}來讓元素的hasLayout為true，但在IE8的標(biāo)準(zhǔn)模式下zoom并不能觸發(fā)hasLayout，所以利用它們設(shè)置hasLayout為false的元素的透明度時(shí)在IE8的標(biāo)準(zhǔn)模式下是失敗的，這個(gè)bug在YUI（我已經(jīng)給YUI團(tuán)隊(duì)提交了這個(gè)bug，他們會在下個(gè)版本修復(fù)，***的2.8.0中依舊存在，期待2.9.0吧）、Prototype、jQuery和Mootools的***版本中都存在，具體請?jiān)贗E8標(biāo)準(zhǔn)模式下看demo9到demo11。

同樣由于在IE8中設(shè)置透明度的方式多種多樣，所以利用JavaScript獲取HTML元素的透明度值需要考慮多種情況，YUI***解決了這個(gè)問題，Prototype比jQuery稍微周全一點(diǎn)，而Mootools直接是bug，具體可以在IE下看demo1到demo8的演示。從這個(gè)角度給4個(gè)框架來個(gè)排名的話，YUI***、Prototype第二、jQuery第三、Mootools墊底。

我簡單的實(shí)現(xiàn)了設(shè)置和獲取Opacity的函數(shù)，可以避開上面框架存在的bug，請?jiān)贗E8標(biāo)準(zhǔn)模式下看demo12：

//設(shè)置CSS opacity 屬性的函數(shù)，解決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不生效，所以再次設(shè)置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 屬性值的函數(shù)  //借鑒自http://developer.yahoel.com/yui/docs/YAHOO.util.Dom.html#method_getStyle  var 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;  }  }

到此，相信大家對“CSS實(shí)現(xiàn)HTML元素透明的方法”有了更深的了解，不妨來實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

新聞標(biāo)題：CSS實(shí)現(xiàn)HTML元素透明的方法
網(wǎng)站鏈接：http://www.chinadenli.net/article22/igpsjc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站改版、網(wǎng)頁設(shè)計(jì)公司、云服務(wù)器、營銷型網(wǎng)站建設(shè)、網(wǎng)站制作、網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)