最近項目裡需要實現這麼個功能類似網游中的聊天框背景都是透明的但是文字是不透明所以如果簡單的使用opacity(非IE)和alpha濾鏡(IE)是無法實現這個效果的會造成全部透明
解決辦法如下
實現完全透明
設置background為transparent即可兩個浏覽器通用
實現透明度可調節
要求改透明度這裡IE和非IE需要分開處理
非IE浏覽器可通過支持CSS的方式處理（不支持CSS的這裡忽略了）css的寫法是
backgroundcolor:rgba()
前面個參數是RGB最後個是透明度
IE浏覽器需要使用gradient濾鏡css寫法是
filter: progid:DXImageTransformMicrosoftgradient(startColorstr=#ffffffendColorstr=#ffffff)
摘錄CSS手冊說明用法
語法
filter : progid:DXImageTransformMicrosoftGradient ( enabled= bEnabled startColorStr= iWidth endColorStr= iWidth )
屬性
enabled : 可選項布爾值(Boolean)設置或檢索濾鏡是否激活true | false true : 默認值 濾鏡激活
false : 濾鏡被禁止
startColorStr : 可選項字符串(String)設置或檢索色彩漸變的開始顏色和透明度
其格式為 #AARRGGBB AA RR GG BB 為十六進制正整數取值范圍為 – FF RR 指定紅色值 GG 指定綠色值 BB 指定藍色值參閱 #RRGGBB 顏色單位 AA 指定透明度 是完全透明 FF 是完全不透明超出取值范圍的值將被恢復為默認值
取值范圍為 #FF – #FFFFFFFF 默認值為 #FFFF 不透明藍色
EndColorStr : 可選項字符串(String)設置或檢索色彩漸變的結束顏色和透明度參閱 startColorStr 屬性默認值為 #FF 不透明黑色
特性
Enabled : 可讀寫布爾值(Boolean)參閱 enabled 屬性
GradientType : 可讀寫整數值(Integer)設置或檢索色彩漸變的方向 | : 默認值 水平漸變
: 垂直漸變
StartColorStr : 可讀寫字符串(String)參閱 startColorStr 屬性
StartColor : 可讀寫整數值(Integer)設置或檢索色彩漸變的開始顏色 取值范圍為 – 為透明 為不透明白色
EndColorStr : 可讀寫字符串(String)設置或檢索色彩漸變的結束顏色和透明度參閱 startColorStr 屬性默認值為 #FF 不透明黑色
EndColor : 可讀寫整數值(Integer)設置或檢索色彩漸變的結束顏色 取值范圍為 – 為透明 為不透明白色當在腳本中使用此特性時也可以用十六進制格式 xAARRGGBB
說明
在對象的背景和內容之間顯示定制的色彩層
當此效果通過轉變顯示時在漸變冊色彩層之上的文本程序性的初始化為透明的當色彩漸變實現後文本顏色會以其定義的值更新
補充完美支持IE和IE
這麼寫在IE和IE中會有點小問題原因是使用transparent的背景時鼠標居然能點到透明層後面的內容還會造成部分事件的實效解決辦法是在外面套個div然後給他加個完全透明的背景圖（PNG）寫法參考
background:url()!important;background:none;_filter:progid:DXImageTransformMicrosoftAlphaImageLoader(src=sizingMethod=scale
這樣在裡面被嵌套的div點擊就不會點到最外面的內容了當然非IE就不需要加這個了
另外對於不支持CSS的浏覽器還有個解決辦法就是把背景層和顯示文字的層分開處理放在同一級只是通過位置上的調整做到看似有層級關系這樣使用透明效果就直接做也不會對文字有影響了
補充
IE下上述辦法仍然無效解決辦法是套層iframe在html代碼裡可以這麼寫
<div><BR><!–[if lte IE ]><iframe id=”ie_filter” style=”position:absolute;left:px;top:px;zindex:;filter:mask();display:block;width:%;height:%;”></iframe><![endif]–><BR></div>
From:http://tw.wingwit.com/Article/program/Java/JSP/201311/19841.html
