JS實現(xiàn)背景透明度可變，文字不透明的效果

最近項目里需要實現(xiàn)這么個功能，類似網(wǎng)游中的聊天框，背景都是透明的，但是文字是不透明。所以如果簡單的使用opacity(非IE)和alpha濾鏡(IE)是無法實現(xiàn)這個效果的，會造成全部透明。

解決辦法如下：

1.實現(xiàn)完全透明：

設置background為transparent即可，兩個瀏覽器通用

2.實現(xiàn)透明度可調(diào)節(jié)：

要求改透明度，這里IE和非IE需要分開處理

非IE瀏覽器可通過支持CSS3的方式處理(不支持CSS3的這里忽略了)，css的寫法是

background-color:rgba(255,255,255,0.5)

前面3個參數(shù)是RGB，最后個是透明度

IE瀏覽器需要使用gradient濾鏡，css寫法是

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00ffffff,endColorstr=#00ffffff)

摘錄CSS手冊說明用法：

語法：

filter : progid:DXImageTransform.Microsoft.Gradient ( enabled= bEnabled , startColorStr= iWidth , endColorStr= iWidth )

屬性：

enabled : 可選項。布爾值(Boolean)。設置或檢索濾鏡是否激活。true | false true : 默認值 。濾鏡激活。

false : 濾鏡被禁止。

startColorStr : 可選項。字符串(String)。設置或檢索色彩漸變的開始顏色和透明度。

其格式為 #AARRGGBB 。 AA 、 RR 、 GG 、 BB 為十六進制正整數(shù)。取值范圍為 00 – FF 。 RR 指定紅色值， GG 指定綠色值， BB 指定藍色值，參閱 #RRGGBB 顏色單位。 AA 指定透明度。 00 是完全透明。 FF 是完全不透明。超出取值范圍的值將被恢復為默認值。

取值范圍為 #FF000000 – #FFFFFFFF 。默認值為 #FF0000FF 。不透明藍色。

EndColorStr : 可選項。字符串(String)。設置或檢索色彩漸變的結束顏色和透明度。參閱 startColorStr 屬性。默認值為 #FF000000 。不透明黑色。

特性：

Enabled : 可讀寫。布爾值(Boolean)。參閱 enabled 屬性。

GradientType : 可讀寫。整數(shù)值(Integer)。設置或檢索色彩漸變的方向。1 | 0 1 : 默認值 。水平漸變。

0 : 垂直漸變。

StartColorStr : 可讀寫。字符串(String)。參閱 startColorStr 屬性。

StartColor : 可讀寫。整數(shù)值(Integer)。設置或檢索色彩漸變的開始顏色。 取值范圍為 0 – 4294967295 。 0 為透明。 4294967295 為不透明白色。

EndColorStr : 可讀寫。字符串(String)。設置或檢索色彩漸變的結束顏色和透明度。參閱 startColorStr 屬性。默認值為 #FF000000 。不透明黑色。

EndColor : 可讀寫。整數(shù)值(Integer)。設置或檢索色彩漸變的結束顏色。 取值范圍為 0 – 4294967295 。 0 為透明。 4294967295 為不透明白色。當在腳本中使用此特性時，也可以用十六進制格式： 0xAARRGGBB 。

說明：

在對象的背景和內(nèi)容之間顯示定制的色彩層。

當此效果通過轉變顯示時，在漸變冊色彩層之上的文本程序性的初始化為透明的，當色彩漸變實現(xiàn)后，文本顏色會以其定義的值更新。

深圳北大青鳥嘉華校區(qū)