DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> JS實現背景透明度可變,文字不透明的效果
JS實現背景透明度可變,文字不透明的效果
編輯:JavaScript綜合知識     

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

 

解決辦法如下:

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),寫法參考:

 

background:url('http://aaa.com/image/transparent.png')!important;background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://aaa.com/image/transparent.png',sizingMethod='scale'

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

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

補充:

IE6下,上述辦法仍然無效,解決辦法是套層iframe,在html代碼裡可以這麼寫:

<div><BR><!–[if lte IE 6.5]><iframe id=”ie6_filter” style=”position:absolute;left:0px;top:0px;z-index:-1;filter:mask();display:block;width:100%;height:100%;”></iframe><![endif]–><BR></div>

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved