兼容IE、Firefox的背景半透明內(nèi)容不透明設(shè)置_html/css_WEB-ITnose

　　記錄一下，知其然也知其所以然。

IE8-特點(diǎn)：

　　1.不支持"opcity:0.5;"這種寫法，只支持"filter:alpha(opacity=50)"。

　　2.如果背景元素?fù)碛衏ss屬性設(shè)置了z-index的值（除默認(rèn)值auto外),則內(nèi)容會(huì)隨著背景元素一起半透明

　　3.如果背景元素的內(nèi)容元素本身或其祖先節(jié)點(diǎn)（這些祖先節(jié)點(diǎn)是背景元素的后代節(jié)點(diǎn)）沒有設(shè)置css定位屬性position:relative/absolute/fixed。則內(nèi)容也會(huì)隨著背景元素一起半透明。

　　4.支持"background：rgb(0,0,0)"設(shè)置背景顏色，但是不支持“background：rgba(0,0,0,0.5)”這種設(shè)置背景顏色的同事設(shè)置半透明的方式。

IE9+、chrome、Firefox特點(diǎn)：

　　1.支持"opacity:0.5",但是內(nèi)容會(huì)隨背景一起半透明

　　1.支持“background：rgba(0,0,0,0.5)”這種設(shè)置背景顏色的同事設(shè)置背景半透明但內(nèi)容不透明的方式。

　　2.如果同事使用opacity=0.5和rgba不透明度為0.5，那么效果是在元素為opacity所設(shè)置的不透明度的情況下背景再次按rgba的方式半透明。最終背景的半透明度為opacity*rgba=0.5*0.5=0.25。

　　IE9+還有一個(gè)特點(diǎn)就是同時(shí)支持opcity:0.5和"filter:alpha(opacity=50)"這種方式。所以rgba和filter一起用會(huì)出現(xiàn)第三項(xiàng)的情況。

　　所以綜合上述的瀏覽器特點(diǎn)，兼容所有瀏覽器的方案是背景元素設(shè)置樣式為

 /*不能設(shè)置z-index,根據(jù)情況設(shè)置需要的background的顏色,chrome/firefox中第一句起作用；IE中后兩句起作用*/ .background{ background: rgba(0,0,0,0.5);/*firefox、chrome*/ background: #000\9;/*IE*/ filter: alpha(opacity=50);/*IE*/ }

　　代碼解讀為在Firefox、chrome下后兩句不會(huì)被識(shí)別，所以使用rgba做背景半透明內(nèi)容不透明；IE下第二句的background會(huì)覆蓋第一句話，所以最終結(jié)果是后兩句起到作用。

　　內(nèi)容元素的樣式為

/*可以設(shè)置元素或其祖先節(jié)點(diǎn)為定位樣式relative/absolute/fixed*/.content{ position:relative; }

　　完整實(shí)例

　　效果圖如下

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com