利用CSS建站中了，為了讓頁面的顏色更加豐富，頁面上凸顯層次感，我們會采用RGBA CSS。它是一種顏色值，也允許我們設置顏色和不透明度/透明度。使用RGBA CSS建立出來的網(wǎng)站會更具有立體和真感。因此，今天筆者小丹為大家?guī)淼腃SS建站知識就是關于RGBA CSS。

    下面有一個例子使用CSS rgba()符號來指定白色與50%的不透明度。

    p {color: rgba(255, 255, 255, 0.5);}

    RGBA的延伸RGB顏色模型，首字母縮寫代表紅色綠色藍色阿爾法。的alpha值代表的透明度/不透明的顏色。

    RGBA語法

    RGBA顏色符號的格式是：rgba(red, green, blue, alpha)

    前三個值紅色的，綠色，藍色的，可以是0到255之間的整數(shù)或百分比在0%至100%之間。這些值描述的紅、綠、藍在所需的顏色。

    下面我們舉例來說，如果你想要的純紅色背景色然后你想要100%的紅、綠色的0%,和0%的藍色,可以設置如下：background-color: rgba(255, 0, 0, 1);

    結果：

    又或者使用百分比值：background-color: rgba(100%, 0%, 0%, 1);

    結果：

    第四價值阿爾法，指定顏色的透明度水平/不透明可以一個值在0.0和1.0之間。這里還要說一句如果你想知道，CSS4編輯CSS顏色模塊的草案，有一個規(guī)范允許使用RGBAα值的百分比，但此時瀏覽器不支持該選項。

    這里是如何指定黃色,不透明度為50%：color: rgba(255, 242, 0, 0.5);

    結果:

    將整數(shù)轉(zhuǎn)換為百分比

    正如之前提到的，使用百分比值而不是整數(shù)值代表的紅色、綠色和藍色的結果完全相同的事情。0是0%，255年是100%。等效比例,簡單整數(shù)除以255然后乘以100%。

    將前面的例子,如果RGBA顏色值 rgba(255, 242, 0, 0.5)然后：

    Red: (255/255) x 100% = 100%
    Green: (242/255) x 100% = 94.9%
    Blue: (0/255) x 100% = 0%
    Alpha: 0.5 (can’t be a percentage unit under CSS3 specifications)
    color: rgba(100%, 94.9%, 0%, 0.5);

    結果:

    將比例轉(zhuǎn)換為整數(shù)

    如果你需要比例轉(zhuǎn)換為整型值，值的百分比乘以255，然后除以100%。比方說我們的顏色是橙色，可以描述如下：rgba(100%, 64.7%, 0%, 1)

    結果:
   

    Red: (100% x 255) / 100% = 255
    Green: (64.7% x 255) / 100% = 165 (rounded to the closest integer)
    Blue: (0% x 255) / 100% = 0
    Alpha: 1

    上面的橙色顏色從百分比值轉(zhuǎn)換為整數(shù)值時：rgba(255, 165, 0, 1)

    結果：
   

    RGB顏色模型的解釋

    RGB顏色模型是一個簡單的方法來描述顏色使用的紅、綠、藍的顏色。這就像水彩顏料、油畫顏料混合得到我們想要的實際顏色。

    試想一下，如果你想產(chǎn)生一個純粹的藍色。要做到這一點,你就不會想要紅色和綠色混合顏色。所以我們把紅色和綠色0%，藍色為100%：rgb(0%, 0%, 100%)

    結果:
   

    但是如果不是藍色的你想要的櫻紅色我們可以創(chuàng)建紫紅色混合100%，100%的藍色紅了：rgb(100%, 0%, 100%)

    結果:

    從基本的色彩理論，我們知道沒有任何顏色黑色。所以讓黑我們設置紅、綠、藍為0%：rgb(0%, 0%, 0%)

    結果：
   
    確定RGB顏色

    我不是數(shù)學天才，我?guī)缀趵斫馍世碚撍晕沂褂霉ぞ邅泶_定RGB顏色值。我使用Photoshop的顏色選擇器功能的紅色、綠色和藍色的一個特定的值，但有免費的在線工具如顏色滑塊和RGB顏色計算器能幫助的任務。

    使用Photoshop RGB值的顏色選擇器對話框

    退路RGBA顏色

    盡管RGBA顏色值符號支持流行的現(xiàn)代瀏覽器，它不是一個壞主意來指定固體(完全不透明的/不透明的)回退顏色以防，特別是很容易做到。

    假設我們有一個div有深藍色的背景顏色在50%不透明度和文本的白人30%的不透明度。

    對于我們的堅實的后備顏色， rgba()不支持的瀏覽器，我們可以使用十六進制的顏色符號或其他任何CSS顏色值符號。在下面的示例中，使用十六進制的顏色符號。

    div {
         background-color: #000080; /* Fallback: navy blue in hexadecimal notation */
         color: #ffffff; /* Fallback: white in hexadecimal notation */
         background-color: rgba(0, 0, 128, 0.5); /* navy blue with 50% opacity */
         color: rgba(255, 255, 255, 0.3); /* white with 30% opacity */
        }

    結果：
   

    這是我們后退的外觀顏色如果RGBA并不在瀏覽器中可用：

    瀏覽器支持

    所有主要瀏覽器都支持RGBA顏色符號。用的角度來看CSS rgba()符號已經(jīng)存在自2011年啟動Internet Explorer 9(3年前)。

    (轉(zhuǎn)載請注明轉(zhuǎn)自：m.flw114.cn，謝謝!珍惜別人的勞動成果，就是在尊重自己!）