JavaScript圖文詳細教程之完成背景透明度可變_javascript

　　JavaScript怎么樣把聊天背景變成透明的呢？如果你是菜鳥想要做出漂亮的對話框肯定會這么問。最近項目里需要實現這么個功能，類似網游中的聊天框，背景都是透明的，但是文字是不透明。所以如果簡單的使用opacity（非IE）和alpha濾鏡（IE）是無法實現這個效果的，會造成全部透明。

JavaScript教程之實現背景透明度可變

　　解決辦法如下：

　　1.實現完全透明：

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

　　2.實現透明度可調節：

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

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

　　background-color:rgba（255，255，255，0.5）

　　前面3個參數是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 為十六進制正整數。取值范圍為 00 – FF 。 RR 指定紅色值， GG 指定綠色值， BB 指定藍色值，參閱 #RRGGBB 顏色單位。 AA 指定透明度。 00 是完全透明。 FF 是完全不透明。超出取值范圍的值將被恢復為默認值。

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

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

　　特性：

　　Enabled ： 可讀寫。布爾值（Boolean）。參閱 enabled 屬性。

　　GradientType ： 可讀寫。整數值（Integer）。設置或檢索色彩漸變的方向。1 | 0 1 ： 默認值 。水平漸變。

　　0 ： 垂直漸變。

　　StartColorStr ： 可讀寫。字符串（String）。參閱 startColorStr 屬性。

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

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

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

　　說明：

　　在對象的背景和內容之間顯示定制的色彩層。

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

　　3. 補充完美支持IE6和IE7

　　這么寫在IE7和IE6中會有點小問題，原因是使用transparent的背景時，鼠標居然能點到透明層后面的內容。。。還會造成部分事件的實效。解決辦法是在外面套個div，然后給他加個完全透明的背景圖（PNG），寫法參考：

　　這樣在里面被嵌套的div點擊就不會點到最外面的內容了。當然非IE就不需要加這個了。

　　另外，對于不支持CSS3的瀏覽器，還有個解決辦法就是把背景層和顯示文字的層分開處理，放在同一級，只是通過位置上的調整做到看似有層級關系，這樣使用透明效果就直接做也不會對文字有影響了。

　　補充：

　　IE6下，上述辦法仍然無效，解決辦法是套層iframe，在html代碼里可以這么寫：