所謂RGBA顏色,顧名思意就是R+G+B+A的顏色,再具體點(diǎn)就是RED+GREEN+BLUE+ALPHA的顏色,小寫(xiě)一下就是red+green+blue+alpha的顏色,翻譯一下就是紅+綠+藍(lán)+Alpha透明的顏色。
我們平時(shí)用的較多的是16進(jìn)制顏色,例如黑色#000000;白色#FFFFFF,這些是16進(jìn)制表示的顏色,如果使用RGB顏色表示就是 rgb(0, 0, 0)與rgb(255,255,255),其實(shí)本質(zhì)上是一樣的,只是一個(gè)是16進(jìn)制表示的,一個(gè)是二進(jìn)制表示的(RGB顏色)。
而RGBA顏色歸為CSS3屬性,其余RGB的區(qū)別在于多了個(gè)A,也就是Alpha透明度,這是個(gè)很好的東西啊,我們以后要實(shí)現(xiàn)半透明效果(無(wú)論是 背景,邊框,文字顏色等都可以用半透明實(shí)現(xiàn)了),但是,一向不緊不慢,孤芳自賞的IE家族,目前為止還不支持rgba顏色,真是讓人哀嘆啊!
您可以參見(jiàn)下面各個(gè)瀏覽器對(duì)rgba的支持情況一覽表,這個(gè)表不是我做的,里面把瀏覽器的祖宗十八代都挖出來(lái)了,不得不佩服圖表制作者,一些跟鳳姐一樣稀奇古怪的瀏覽器可以直接忽略掉:
瀏覽器、版本、平臺(tái) | 結(jié)果 | 后備 |
---|---|---|
Firefox 3.6 (OS X) | 作用 | — |
Firefox 3.0.5 (OS X) | 作用 | — |
Firefox 3.0.5 (Windows XP, Vista) | 作用 | — |
Firefox 2.0.0.18 (PC) | 無(wú)作用 | 實(shí)色 |
Safari 4 (Developer Preview & 4.0.4, OS X) | 作用 | — |
Safari 3.2.1 (OS X, Windows XP) | 作用 | — |
Mobile Safari (iPhone) | 作用 | — |
Opera 9.6.1 | 無(wú)作用 | 實(shí)色 |
Opera 10 Beta (Linux & Windows) | 作用 | — |
Opera 10.10 (OS X) | 作用 | — |
IE 4.01 | 無(wú)作用 | 沒(méi)有顏色 |
IE 5.5 (PC via IETester) | 無(wú)作用 | 沒(méi)有顏色 |
IE 6 (PC via IETester) | 無(wú)作用 | 實(shí)色 |
IE 7 | 無(wú)作用 | 實(shí)色 |
IE 8 (Beta 2 & release version) | 無(wú)作用 | 實(shí)色 |
Google Chrome 0.4.154.33 (Windows XP) | 作用 | — |
Google Chrome 1.0.154.46 (Windows XP) | 作用 | — |
Google Chrome 4.0.249.49 (OS X) | 作用 | — |
Netscape 4.8 (PC) | 無(wú)作用 | 沒(méi)有顏色 |
Navigator 9.0.0.5 Linus | 無(wú)作用 | 實(shí)色 |
SeaMonkey 1.1.14 | 無(wú)作用 | 沒(méi)有顏色 |
SeaMonkey 2.0 | 作用 | — |
Sunrise 1.7.5 | 作用 | — |
Stainless 0.2.5 | 作用 | — |
Flock 1.2.7 | 無(wú)作用 | 實(shí)色 |
Flock 2.0.2 | 作用 | — |
BlackBerry Storm Browser | 作用 | — |
Camino 1.6.6 | 無(wú)作用 | 實(shí)色 |
Camino 2.0b1 | 作用 | — |
Iceape 1.1.14 (Linux) | 無(wú)作用 | 實(shí)色 |
Kazehakase 0.5.2 (Linux) | 無(wú)作用 | 實(shí)色 |
Avant 11.7 (Windows XP) | 無(wú)作用 | 實(shí)色 |
對(duì)于rgba的使用,您可以參見(jiàn)下面的簡(jiǎn)單示例:
background:rgba(200, 54, 54, 0.5);
其中,表示半透明度的0.5前面的0是可以省掉的,直接.5也是可以的。
正如上表所展示的,IE8及其以下都對(duì)實(shí)用的rgba顏色不支持,怎么半呢?
其實(shí)細(xì)想一下,rgba顏色多了個(gè)什么東西呢,不就是半透明嗎,IE不是由半透明濾鏡嘛,我們只要使用:
filter:alpha(opacity=50);
不也很ok嗎?
是嗎?只要靜下來(lái)一想,完全不是那么回事,IE半透明濾鏡透明的是整個(gè)元素,它可以只透明元素的邊框嗎?它可以只透明文字的投影嗎?都不行。
正所謂車(chē)到山前必有路,IE下某一屬性是可以實(shí)現(xiàn)類(lèi)似于rgba的效果的,那就是半透明背景。
IE下背景半透明的方案
實(shí)現(xiàn)IE下僅僅背景色的半透明沒(méi)有什么玄乎的,就是IE濾鏡,準(zhǔn)確的講是IE漸變?yōu)V鏡。關(guān)于IE漸變?yōu)V鏡,我曾在“CSS實(shí)現(xiàn)兼容性的漸變背景(gradient)效果”一文中有過(guò)一些介紹,但是不是很全。
這里可以稍微在補(bǔ)充下下:
此濾鏡上半身特征是 FILTER:progid:DXImageTransform.Microsoft.Gradient
最簡(jiǎn)單的使用如下:
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#AARRGGBB,endColorStr=i#AARRGGBB)
startColorStr:可選項(xiàng)。字符串(String)。設(shè)置或檢索色彩漸變的開(kāi)始顏色和透明度。
其格式為 #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參數(shù)和GradientType參數(shù),具體含義不是本文重點(diǎn),掠過(guò)~~
我們關(guān)心的是這里的顏色表示,即#AARRGGBB
,看到這里前面的兩個(gè)AA字母沒(méi),這個(gè)AA不是指吃飯K歌的AA,而 是指rgba中的那個(gè)a,也就是透明度的意思,只是與rgba不同的是,這里的AA是要用16進(jìn)制表示的(非小數(shù)值),也就是從00~FF,00表示完全 透明了,F(xiàn)F則相當(dāng)于rgba中1,表示完全不透明實(shí)色一個(gè)。
好了,現(xiàn)在這個(gè)買(mǎi)賣(mài)好做了,就像雖然閆鳳嬌和阿嬌長(zhǎng)相差異很大,但是都是很清純的女生,于是呢,我們就可以實(shí)現(xiàn)兼容性,實(shí)現(xiàn)統(tǒng)一了。
rgba+filter實(shí)現(xiàn)兼容性的半透明背景效果
參見(jiàn)如下的示例代碼:
background:rgba(0,0,0,0.5); filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F000000,endcolorstr=#7F000000);
上面代碼所實(shí)現(xiàn)的效果是讓所有主流瀏覽器下元素可以實(shí)現(xiàn)50%透明的黑色背景。類(lèi)似下面的效果:
實(shí)際的應(yīng)用
如果能夠直接實(shí)現(xiàn)兼容性的背景色,那么很多事情就好辦了。例如我們要實(shí)現(xiàn)兼容性的半透明邊框,就不需要上下左右拼湊了,最好的例子莫過(guò)于jQuery的boxy彈出層效果了。
看到上面的黑色的半透明邊框沒(méi),由于兼容性的問(wèn)題,這里的圓角黑色半透明邊框是怎么實(shí)現(xiàn)的呢?是四角的圖片+四邊的opacity半透明拼接實(shí)現(xiàn)的,不可不謂消耗巨大。
其實(shí),一切都可以很輕松的。應(yīng)用本文所敘述的半透明背景色方法,加上一點(diǎn)漸進(jìn)增強(qiáng),我們來(lái)看看如果最高效的實(shí)現(xiàn)黑色半透明邊框,如下代碼:
.opacity_bg_box{ background:rgba(0,0,0,0.5); -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F000000,endcolorstr=#7F000000); padding:8px; position:absolute; top:20px; } .opacity_in_box{ border:1px solid #f0f3f9; background:white; font-size:0; }
對(duì)于HTML代碼如下:
<div class="opacity_bg_box"> <div class="opacity_in_box"> <img data-src="http://image.zhangxinxu.com/image/study/s/s256/mm13.jpg" /> </div> </div>
結(jié)果如下圖所示:
結(jié)語(yǔ)
雖然IE濾鏡這個(gè)東西盡量避免實(shí)現(xiàn),但是在有些特殊情況下,權(quán)衡下來(lái),此處的方法還是有一定的使用價(jià)值的。如果一切都是我做主,我可能就會(huì)讓IE瀏 覽器直接實(shí)色表示了,畢竟,主要的功能沒(méi)有多大影響,其次,實(shí)色也是蠻好看的,權(quán)衡利弊,IE的表現(xiàn)稍遜一點(diǎn)反而是上佳選擇,當(dāng)然,這只是我個(gè)人的看法, 每個(gè)人的經(jīng)歷,關(guān)注的領(lǐng)域,以及經(jīng)驗(yàn)的不同會(huì)導(dǎo)致對(duì)問(wèn)題看法的不同,您可能不認(rèn)為如此。好了,就這么多,我確實(shí)累的不行了,女人太煩了真是麻煩~~~