DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS3基礎 >> 6.2 RGBA顏色
6.2 RGBA顏色
編輯:CSS3基礎     

一、RGBA顏色

RGB是一種色彩標准,是由紅(R)、綠(G)、藍(B)的變化以及相互疊加來得到各式各樣的顏色。RGBA說白了,就是在RGB的基礎上加了一個透明度通道Alpha。

語法:

rgba(R,G,B,A)

說明:

R:紅色值(Red);

G:綠色值(Green);

B:藍色值(Blue);

A:透明度(Alpha);

R、G、B三個參數可以為正整數,也可以為百分比。正整數值的取值范圍為0~255,百分數值的取值范圍為0.0%~100.0%。超出范圍的數值將被截至其最接近的取值極限。並非所有浏覽器都支持使用百分數值。

參數A為透明度,類似opacity屬性,取值范圍在0.0~1.0之間,不可為負值。下面是RGBA顏色的正確用法:

 
rgba(255,255,0,0.5)
rgba(50%,80%,50%,0.5)

大家看到RGBA顏色,很容易讓我們想起上一節中的不透明度opacity屬性。

舉例:

在線測試
 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head> 
    <title>CSS3 RGBA顏色</title>
    <style type="text/css">
        *{padding:0;margin:0;}
        ul
        {
            display:inline-block;
            list-style-type:none;
            width:200px;
        }
        li
        {
            height:30px;
            line-height:30px;
            font-size:20px;
            font-weight:bold;
            text-align:center;
        }
        /*第1個li*/
        li:first-child
        {
            background-color:#FF00FF;
        }
        /*第2個li*/
        li:nth-child(2)
        {
            background-color:rgba(255,0,255,0.5);
        }
        /*第3個li*/
        li:last-child
        {
            background-color:#FF00FF;
            opacity:0.5;
        } 
    </style>
</head>
<body>
    <ul>
        <li> 學習網</li>
        <li> 學習網</li>
        <li> 學習網</li>
    </ul>
</body>
</html>

在浏覽器預覽效果如下:

分析:

十六進制顏色值#FF00FF等價於rgb(255,0,255)。第1個li元素沒有使用RGBA顏色值,也沒有使用透明度opacity屬性;第2個li元素使用RGBA顏色值;第3個li元素使用透明度opacity屬性。

大家可以清晰地看出,假如我們對某個元素使用透明度opacity屬性,則該元素的內容以及子元素都會受到影響。

從上面的例子我們知道,對於設置元素的透明度,RGBA比透明度opacity屬性更好,因為RGBA不會影響元素中的內容以及子元素的不透明度。

疑問

1、十六進制顏色值與RGB顏色值如何轉換呢?

建議大家下載Color Express這個軟件,簡單好用。不僅可以取顏色,還可以轉換顏色值等。

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