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

    下面有一個(gè)例子使用CSS rgba()符號(hào)來(lái)指定白色與50%的不透明度。

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

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

    RGBA語(yǔ)法

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

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

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

    結(jié)果：

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

    結(jié)果：

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

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

    結(jié)果:

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

    正如之前提到的，使用百分比值而不是整數(shù)值代表的紅色、綠色和藍(lán)色的結(jié)果完全相同的事情。0是0%，255年是100%。等效比例,簡(jiǎn)單整數(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);

    結(jié)果:

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

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

    結(jié)果:
   

    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ù)值時(shí)：rgba(255, 165, 0, 1)

    結(jié)果：
   

    RGB顏色模型的解釋

    RGB顏色模型是一個(gè)簡(jiǎn)單的方法來(lái)描述顏色使用的紅、綠、藍(lán)的顏色。這就像水彩顏料、油畫(huà)顏料混合得到我們想要的實(shí)際顏色。

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

    結(jié)果:
   

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

    結(jié)果:

    從基本的色彩理論，我們知道沒(méi)有任何顏色黑色。所以讓黑我們?cè)O(shè)置紅、綠、藍(lán)為0%：rgb(0%, 0%, 0%)

    結(jié)果：
   
    確定RGB顏色

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

    使用Photoshop RGB值的顏色選擇器對(duì)話(huà)框

    退路RGBA顏色

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

    假設(shè)我們有一個(gè)div有深藍(lán)色的背景顏色在50%不透明度和文本的白人30%的不透明度。

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

    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 */
        }

    結(jié)果：
   

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

    瀏覽器支持

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

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