0712-2888027 189-8648-0214
微信公眾號

孝感風信網絡科技有限公司微信公眾號

當前位置:主頁 > 技術支持 > HTML5/CSS3 > RGBA顏色與兼容性的半透明背景色

RGBA顏色與兼容性的半透明背景色

時間:2022-01-24來源:風信官網 點擊: 304次

所謂RGBA顏色,顧名思意就是R+G+B+A的顏色,再具體點就是RED+GREEN+BLUE+ALPHA的顏色,小寫一下就是red+green+blue+alpha的顏色,翻譯一下就是紅+綠+藍+Alpha透明的顏色。

我們平時用的較多的是16進制顏色,例如黑色#000000;白色#FFFFFF,這些是16進制表示的顏色,如果使用RGB顏色表示就是 rgb(0, 0, 0)與rgb(255,255,255),其實本質上是一樣的,只是一個是16進制表示的,一個是二進制表示的(RGB顏色)。

而RGBA顏色歸為CSS3屬性,其余RGB的區別在于多了個A,也就是Alpha透明度,這是個很好的東西啊,我們以后要實現半透明效果(無論是 背景,邊框,文字顏色等都可以用半透明實現了),但是,一向不緊不慢,孤芳自賞的IE家族,目前為止還不支持rgba顏色,真是讓人哀嘆??!

您可以參見下面各個瀏覽器對rgba的支持情況一覽表,這個表不是我做的,里面把瀏覽器的祖宗十八代都挖出來了,不得不佩服圖表制作者,一些跟鳳姐一樣稀奇古怪的瀏覽器可以直接忽略掉:

瀏覽器、版本、平臺 結果 后備
Firefox 3.6 (OS X) 作用
Firefox 3.0.5 (OS X) 作用
Firefox 3.0.5 (Windows XP, Vista) 作用
Firefox 2.0.0.18 (PC) 無作用 實色
Safari 4 (Developer Preview & 4.0.4, OS X) 作用
Safari 3.2.1 (OS X, Windows XP) 作用
Mobile Safari (iPhone) 作用
Opera 9.6.1 無作用 實色
Opera 10 Beta (Linux & Windows) 作用
Opera 10.10 (OS X) 作用
IE 4.01 無作用 沒有顏色
IE 5.5 (PC via IETester) 無作用 沒有顏色
IE 6 (PC via IETester) 無作用 實色
IE 7 無作用 實色
IE 8 (Beta 2 & release version) 無作用 實色
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) 無作用 沒有顏色
Navigator 9.0.0.5 Linus 無作用 實色
SeaMonkey 1.1.14 無作用 沒有顏色
SeaMonkey 2.0 作用
Sunrise 1.7.5 作用
Stainless 0.2.5 作用
Flock 1.2.7 無作用 實色
Flock 2.0.2 作用
BlackBerry Storm Browser 作用
Camino 1.6.6 無作用 實色
Camino 2.0b1 作用
Iceape 1.1.14 (Linux) 無作用 實色
Kazehakase 0.5.2 (Linux) 無作用 實色
Avant 11.7 (Windows XP) 無作用 實色

對于rgba的使用,您可以參見下面的簡單示例:

background:rgba(200, 54, 54, 0.5);

其中,表示半透明度的0.5前面的0是可以省掉的,直接.5也是可以的。

正如上表所展示的,IE8及其以下都對實用的rgba顏色不支持,怎么半呢?

其實細想一下,rgba顏色多了個什么東西呢,不就是半透明嗎,IE不是由半透明濾鏡嘛,我們只要使用:

filter:alpha(opacity=50);

不也很ok嗎?

是嗎?只要靜下來一想,完全不是那么回事,IE半透明濾鏡透明的是整個元素,它可以只透明元素的邊框嗎?它可以只透明文字的投影嗎?都不行。

正所謂車到山前必有路,IE下某一屬性是可以實現類似于rgba的效果的,那就是半透明背景。

IE下背景半透明的方案

實現IE下僅僅背景色的半透明沒有什么玄乎的,就是IE濾鏡,準確的講是IE漸變濾鏡。關于IE漸變濾鏡,我曾在“CSS實現兼容性的漸變背景(gradient)效果”一文中有過一些介紹,但是不是很全。

這里可以稍微在補充下下:
此濾鏡上半身特征是 FILTER:progid:DXImageTransform.Microsoft.Gradient
最簡單的使用如下:

filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#AARRGGBB,endColorStr=i#AARRGGBB)

startColorStr:可選項。字符串(String)。設置或檢索色彩漸變的開始顏色和透明度。
  其格式為 #AARRGGBB 。 AA 、 RR 、 GG 、 BB 為十六進制正整數。取值范圍為 00 – FF 。 RR 指定紅色值, GG 指定綠色值, BB 指定藍色值,參閱 #RRGGBB 顏色單位。 AA 指定透明度。 00 是完全透明。 FF 是完全不透明。超出取值范圍的值將被恢復為默認值。
  取值范圍為 #FF000000 – #FFFFFFFF 。默認值為 #FF0000FF 。不透明藍色。
EndColorStr:可選項。字符串(String)。設置或檢索色彩漸變的結束顏色和透明度。參閱 startColorStr 屬性。默認值為 #FF000000 。不透明黑色。

此濾鏡還有諸如Enabled參數和GradientType參數,具體含義不是本文重點,掠過~~

我們關心的是這里的顏色表示,即#AARRGGBB,看到這里前面的兩個AA字母沒,這個AA不是指吃飯K歌的AA,而 是指rgba中的那個a,也就是透明度的意思,只是與rgba不同的是,這里的AA是要用16進制表示的(非小數值),也就是從00~FF,00表示完全 透明了,FF則相當于rgba中1,表示完全不透明實色一個。

好了,現在這個買賣好做了,就像雖然閆鳳嬌和阿嬌長相差異很大,但是都是很清純的女生,于是呢,我們就可以實現兼容性,實現統一了。

rgba+filter實現兼容性的半透明背景效果

參見如下的示例代碼:

background:rgba(0,0,0,0.5); filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F000000,endcolorstr=#7F000000);

上面代碼所實現的效果是讓所有主流瀏覽器下元素可以實現50%透明的黑色背景。類似下面的效果:
RGBA顏色與兼容性的半透明背景色

實際的應用

如果能夠直接實現兼容性的背景色,那么很多事情就好辦了。例如我們要實現兼容性的半透明邊框,就不需要上下左右拼湊了,最好的例子莫過于jQuery的boxy彈出層效果了。
中文漢化后的boxy插件的預覽圖 張鑫旭-鑫空間-鑫生活

看到上面的黑色的半透明邊框沒,由于兼容性的問題,這里的圓角黑色半透明邊框是怎么實現的呢?是四角的圖片+四邊的opacity半透明拼接實現的,不可不謂消耗巨大。

其實,一切都可以很輕松的。應用本文所敘述的半透明背景色方法,加上一點漸進增強,我們來看看如果最高效的實現黑色半透明邊框,如下代碼:

.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;
}

對于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>

結果如下圖所示:
Firefox下半透明邊框效果 張鑫旭-鑫空間-鑫生活
IE6下半透明邊框效果 張鑫旭-鑫空間-鑫生活

結語

雖然IE濾鏡這個東西盡量避免實現,但是在有些特殊情況下,權衡下來,此處的方法還是有一定的使用價值的。如果一切都是我做主,我可能就會讓IE瀏 覽器直接實色表示了,畢竟,主要的功能沒有多大影響,其次,實色也是蠻好看的,權衡利弊,IE的表現稍遜一點反而是上佳選擇,當然,這只是我個人的看法, 每個人的經歷,關注的領域,以及經驗的不同會導致對問題看法的不同,您可能不認為如此。好了,就這么多,我確實累的不行了,女人太煩了真是麻煩~~~

欄目列表
推薦內容
熱點內容
展開
亚洲乱亚洲乱妇无码