• 當(dāng)前位置：創(chuàng)新互聯(lián) >> 常見問題 >> 前端開發(fā) >> JavaScript教程 >> JS實(shí)現(xiàn)背景透明度可變，文字不透明的效果

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

• 作者：創(chuàng)新互聯(lián) 文章來源：前端開發(fā)部 點(diǎn)擊數(shù)： 更新時(shí)間：2011-12-19
• 　　最近項(xiàng)目里需要實(shí)現(xiàn)這么個(gè)功能，類似網(wǎng)游中的聊天框，背景都是透明的，但是文字是不透明。所以如果簡(jiǎn)單的使用opacity(非IE)和alpha濾鏡(IE)是無法實(shí)現(xiàn)這個(gè)效果的，會(huì)造成全部透明。
  解決辦法如下：
  
  1.實(shí)現(xiàn)完全透明
  　　設(shè)置background為transparent即可，兩個(gè)瀏覽器通用
  
  2.實(shí)現(xiàn)透明度可調(diào)節(jié)
  　　要求改透明度，這里IE和非IE需要分開處理，非IE瀏覽器可通過支持CSS3的方式處理（不支持CSS3的這里忽略了），css的寫法是background-color:rgba(255,255,255,0.5)前面3個(gè)參數(shù)是RGB，最后個(gè)是透明度IE瀏覽器需要使用gradient濾鏡，css寫法是:filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00ffffff,endColorstr=#00ffffff)
  　　摘錄CSS手冊(cè)說明用法：
  語法：
  　　filter : progid:DXImageTransform.Microsoft.Gradient ( enabled= bEnabled , startColorStr= iWidth , endColorStr= iWidth )
  屬性：
  　　enabled  :  可選項(xiàng)。布爾值(Boolean)。設(shè)置或檢索濾鏡是否激活。true | false true  :  默認(rèn)值 。濾鏡激活。
  　　false  :  濾鏡被禁止。
  　　startColorStr  :  可選項(xiàng)。字符串(String)。設(shè)置或檢索色彩漸變的開始顏色和透明度。
  其格式為 #AARRGGBB 。 AA 、 RR 、 GG 、 BB 為十六進(jìn)制正整數(shù)。取值范圍為 00 – FF 。 RR 指定紅色值， GG 指定綠色值， BB 指定藍(lán)色值，參閱 #RRGGBB 顏色單位。 AA 指定透明度。 00 是完全透明。 FF 是完全不透明。超出取值范圍的值將被恢復(fù)為默認(rèn)值。
  　　取值范圍為 #FF000000 – #FFFFFFFF 。默認(rèn)值為 #FF0000FF 。不透明藍(lán)色。
  　　EndColorStr  :  可選項(xiàng)。字符串(String)。設(shè)置或檢索色彩漸變的結(jié)束顏色和透明度。參閱 startColorStr 屬性。默認(rèn)值為 #FF000000 。不透明黑色。
  特性：
  　　Enabled  :  可讀寫。布爾值(Boolean)。參閱 enabled 屬性。
  　　GradientType  :  可讀寫。整數(shù)值(Integer)。設(shè)置或檢索色彩漸變的方向。1 | 0 1  :  默認(rèn)值 。水平漸變。0  :  垂直漸變。
  　　StartColorStr  :  可讀寫。字符串(String)。參閱 startColorStr 屬性。
  　　StartColor  :  可讀寫。整數(shù)值(Integer)。設(shè)置或檢索色彩漸變的開始顏色。 取值范圍為 0 – 4294967295 。 0 為透明。 4294967295 為不透明白色。
  　　EndColorStr  :  可讀寫。字符串(String)。設(shè)置或檢索色彩漸變的結(jié)束顏色和透明度。參閱 startColorStr 屬性。默認(rèn)值為 　　#FF000000 。不透明黑色。
  　　EndColor  :  可讀寫。整數(shù)值(Integer)。設(shè)置或檢索色彩漸變的結(jié)束顏色。 取值范圍為 0 – 4294967295 。 0 為透明。 　　4294967295 為不透明白色。當(dāng)在腳本中使用此特性時(shí)，也可以用十六進(jìn)制格式： 0xAARRGGBB 。
  說明：
  　　在對(duì)象的背景和內(nèi)容之間顯示定制的色彩層。
  　　當(dāng)此效果通過轉(zhuǎn)變顯示時(shí)，在漸變冊(cè)色彩層之上的文本程序性的初始化為透明的，當(dāng)色彩漸變實(shí)現(xiàn)后，文本顏色會(huì)以其定義的值更新。
  
  3. 補(bǔ)充完美支持IE6和IE7
  　　這么寫在IE7和IE6中會(huì)有點(diǎn)小問題，原因是使用transparent的背景時(shí)，鼠標(biāo)居然能點(diǎn)到透明層后面的內(nèi)容...還會(huì)造成部分事件的實(shí)效。解決辦法是在外面套個(gè)div，然后給他加個(gè)完全透明的背景圖（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點(diǎn)擊就不會(huì)點(diǎn)到最外面的內(nèi)容了。當(dāng)然非IE就不需要加這個(gè)了。
  　　另外，對(duì)于不支持CSS3的瀏覽器，還有個(gè)解決辦法就是把背景層和顯示文字的層分開處理，放在同一級(jí)，只是通過位置上的調(diào)整做到看似有層級(jí)關(guān)系，這樣使用透明效果就直接做也不會(huì)對(duì)文字有影響了。
  補(bǔ)充：
  　　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>
• 用JavaScript實(shí)現(xiàn)窗口從天而降效果 :上一篇
  我要在innerHTML中執(zhí)行script腳本 :下一篇