兼容IE、Firefox的背景半透明內容不透明設置_html/css_WEB-ITnose

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

IE8-特點：

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

　　2.如果背景元素擁有css屬性設置了z-index的值（除默認值auto外),則內容會隨著背景元素一起半透明

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

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

IE9+、chrome、Firefox特點：

　　1.支持"opacity:0.5",但是內容會隨背景一起半透明

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

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

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

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

 /*不能設置z-index,根據(jù)情況設置需要的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下后兩句不會被識別，所以使用rgba做背景半透明內容不透明；IE下第二句的background會覆蓋第一句話，所以最終結果是后兩句起到作用。

　　內容元素的樣式為

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

　　完整實例

　　效果圖如下

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