CSS實(shí)現(xiàn)HTML元素透明的方法小結(jié)
我要評(píng)論首先看看A級(jí)瀏覽器所支持的用CSS實(shí)現(xiàn)元素透明的方案：
| 瀏覽器 | 最低 版本 |
方案 |
|---|---|---|
| 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 |
實(shí)際上在IE8中，-ms-filter是filter的別名，兩者區(qū)別是-ms- filter的屬相值必須被單引號(hào)或雙引號(hào)包圍，而filter中則不是必須，而在IE8之前的版本中，filter的屬性值必須不被單引號(hào)或雙引號(hào)包圍。
IE中的HTML元素要實(shí)現(xiàn)透明，則其必須具備layout，這樣的元素有僅可讀的屬性hasLayout，且其值為true。具體情況如下：
body、img、table、tr、th、td等元素的hasLayout一直為true。type為text、button、file或select的input的hasLayout一直為true。- 設(shè)置
{position:absolute}的元素的hasLayout為true - 設(shè)置
{float:left|right}的元素的hasLayout為true - 設(shè)置
{display:inline-block}的元素的hasLayout為true - 設(shè)置
{height:xx}或{width:xx}的元素必須具體以下兩個(gè)條件之一，其hasLayout才能為true：- IE8兼容模式和IE8以前的瀏覽器中，在標(biāo)準(zhǔn)(strict)模式下其
display的值是block，如demo3就不行。 - 元素在怪癖模式（compat mode）下。
- IE8兼容模式和IE8以前的瀏覽器中，在標(biāo)準(zhǔn)(strict)模式下其
- 設(shè)置了
{zoom:xx}的元素在IE8的兼容模式或IE8之前的瀏覽器中其hasLayout為true，但在IE8的標(biāo)準(zhǔn)模式下則不會(huì)觸發(fā)hasLayout。 - 設(shè)置了
{writing-mode:tb-rl}的元素的hasLayout為true。 - 元素的
contentEditable的屬性值為true。 - 在IE8標(biāo)準(zhǔn)模式下設(shè)置了
{display:block}的元素的hasLayout一直為true，如demo8。
關(guān)于hasLayout的更多詳情可以看Exploring Internet Explorer “HasLayout” Overview和On having layout
從上面就可以看出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;
}
而目前簡(jiǎn)單最好用的實(shí)現(xiàn)方式是如CSS Opacity中demo4這樣：
{
filter:alpha(opacity=30);
opacity:.3;
}
實(shí)際上目前最流行的JavaScript框架的設(shè)置樣式方法都是應(yīng)用這種方式，并且針對(duì)IE設(shè)置了{zoom:1}來(lái)讓元素的hasLayout為true，但在IE8的標(biāo)準(zhǔn)模式下zoom并不能觸發(fā)hasLayout，所以利用它們?cè)O(shè)置hasLayout為false的元素的透明度時(shí)在IE8的標(biāo)準(zhǔn)模式下是失敗的，這個(gè)bug在YUI（我已經(jīng)給YUI團(tuán)隊(duì)提交了這個(gè)bug，他們會(huì)在下個(gè)版本修復(fù)，最新的 2.8.0中依舊存在，期待2.9.0吧）、Prototype、jQuery和Mootools的最新版本中都存在，具體請(qǐng)?jiān)贗E8標(biāo)準(zhǔn)模式下看demo9到demo11。同樣由于在IE8中設(shè)置透明度的方式多種多樣，所以利用JavaScript獲取HTML元素的透明度值需要考慮多種情況，YUI完美解決了這個(gè)問(wèn)題，Prototype比jQuery稍微周全一點(diǎn)，而Mootools直接是bug，具體可以在IE下看demo1到demo8的演示。從這個(gè)角度給4個(gè)框架來(lái)個(gè)排名的話，YUI第一、 Prototype第二、jQuery第三、Mootools墊底。
我簡(jiǎn)單的實(shí)現(xiàn)了設(shè)置和獲取Opacity的函數(shù)，可以避開(kāi)上面框架存在的bug，請(qǐng)在IE8標(biāo)準(zhǔn)模式下看demo12：
//設(shè)置CSS opacity 屬性的函數(shù)，解決IE8的問(wèn)題
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{
//測(cè)試是否已有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;
}
}
不得不說(shuō)，這些事都是IE整出來(lái)的……
相關(guān)文章
- CSS Grid 是一種二維布局系統(tǒng)，可以同時(shí)控制行和列，相比 Flex（一維布局），更適合用在整體頁(yè)面布局或復(fù)雜模塊結(jié)構(gòu)中,這篇文章主要介紹了前端CSS Grid 布局詳解,需要的朋2025-04-16
CSS Padding 和 Margin 區(qū)別全解析
CSS 中的 padding 和 margin 是兩個(gè)非?；A(chǔ)且重要的屬性，它們用于控制元素周圍的空白區(qū)域，本文將詳細(xì)介紹 padding 和 margin 的概念、區(qū)別以及如何在實(shí)際項(xiàng)目中使用它們2025-04-07- will-change 是一個(gè) CSS 屬性，用于告訴瀏覽器某個(gè)元素在未來(lái)可能會(huì)發(fā)生哪些變化，本文給大家介紹CSS will-change 屬性詳解，感興趣的朋友一起看看吧2025-04-07
- 本文給大家分享在 CSS 中，去除a標(biāo)簽（超鏈接）的下劃線的幾種方法，本文給大家介紹的非常詳細(xì)，感興趣的朋友一起看看吧2025-04-07
在前端開(kāi)發(fā)中，CSS（層疊樣式表）不僅是用來(lái)控制網(wǎng)頁(yè)的外觀和布局，更是實(shí)現(xiàn)復(fù)雜交互和動(dòng)態(tài)效果的關(guān)鍵技術(shù)之一,隨著前端技術(shù)的不斷發(fā)展，CSS的用法也日益豐富和高級(jí),本文將2025-04-07css中的 vertical-align與line-height作用詳解
文章詳細(xì)介紹了CSS中的`vertical-align`和`line-height`屬性,包括它們的作用、適用元素、屬性值、常見(jiàn)使用場(chǎng)景、常見(jiàn)問(wèn)題及解決方案，感興趣的朋友跟隨小編一起看看吧2025-03-26淺析CSS 中z - index屬性的作用及在什么情況下會(huì)失效
z-index屬性用于控制元素的堆疊順序,值越大,元素越顯示在上層,它需要元素具有定位屬性（如relative、absolute、fixed或sticky），本文給大家介紹CSS 中z - index屬性的作用2025-03-21- 文章詳細(xì)介紹了CSS中的打印媒體查詢@mediaprint包括基本語(yǔ)法、常見(jiàn)使用場(chǎng)景和代碼示例,如隱藏非必要元素、調(diào)整字體和顏色、處理鏈接的URL顯示、分頁(yè)控制、調(diào)整邊距和背景等2025-03-18
CSS模擬 html 的 title 屬性(鼠標(biāo)懸浮顯示提示文字效果)
本文介紹了如何使用CSS模擬HTML的title屬性,通過(guò)鼠標(biāo)懸浮顯示提示文字效果,通過(guò)設(shè)置`.tipBox`和`.tipBox.tipContent`的樣式,實(shí)現(xiàn)了提示內(nèi)容的隱藏和顯示，感興趣的朋友一起2025-03-10
前端 CSS 動(dòng)態(tài)設(shè)置樣式：:class、:style 等技巧(推薦)
本文介紹了Vue.js中動(dòng)態(tài)綁定類名和內(nèi)聯(lián)樣式的兩種方法：對(duì)象語(yǔ)法和數(shù)組語(yǔ)法,通過(guò)對(duì)象語(yǔ)法,可以根據(jù)條件動(dòng)態(tài)切換類名或樣式；通過(guò)數(shù)組語(yǔ)法,可以同時(shí)綁定多個(gè)類名或樣式,此外2025-02-26
