如何使用 CSS 顏色？

CSS 中顏色有多種不同的應用方式；預先定義的顏色名稱、rgb、rgba 以及使用十六進位顏色值。下面的 CSS 展示的是使用預先定義的顏色名稱，背景色將設定為 'purple（紫色）'。

background-color: Purple;

CSS 中有很多預先定義的顏色，可以向上面寫的那樣，僅使用預先定義的名稱來套用該顏色。下面是預先定義顏色的列表，這並不是所有的預定義顏色。這些名稱並不會區分大小寫，所以，你全部寫成大寫或小寫都沒毛病。

Black（黑色）、White（白色）、Grey (or Gray)（灰色）、Silver（銀色）

Blue（藍色）、Aqua（水綠色）、Cyan（青色)

Crimsom（深紅色）、Red（紅色）

Green（綠）、DarkGreen（深綠色）、Lime（石灰）

Gold（金）、Yellow （黃色）

Pink（粉紅色）、HotPink（火粉紅色）、Magenta（洋紅色）

Brown（棕色）、Maroon（栗子）

Purple（紫色） 、Violet（紫羅蘭）

Red（紅）、Green（綠）、Blue（藍）或rgb 是CSS 中的另一種顏色設定方式。 rgb 函數接收三個參數，分別代表紅、綠、藍。每個顏色分量的值可以是 0 到 255 中的任意整數，包含 0 和 255。0 是最小值，代表該顏色並未應用。下面的程式碼中藍色分量的值為 0，所以藍色不會被加到顏色中。我們設定紅色分量為最亮值，綠色分量設定為一半（125）。這將會將設定為橙色。

background-color: rgb(255, 125, 0);

透明度是另一個在 CSS 中可以應用到顏色中的東西。透過使用 rgba 函數你可以新增一個額外的參數來設定透明度。 alpha 正是設定透明程度的。其數值是十進制數從 0 到 1，所以、0.5 代表半個透明度。下面的程式碼同樣是設定為橘色，不過還設定了一半的透明度，使它有點透明。

background-color: rgba(255, 125, 0, 0.5);

CSS 中最後還有一種設定顏色的方式，使用十六進制數值。十六進制數值從 0 到 F 並且給每個顏色分量兩部分，並以一個主題符號 '#' 開頭。十六進制的字母部分從 A 到 F 對應數字的 10 到 15。下面的 CSS 程式碼是使用十六進位表示的橘色。紅色部分錶示為 'FF'，綠色的部分為 '76'，藍色分量為 '00'。綠色分量並不是數字 76，它是兩部分數字 7 和數字 6。

background-color: #FF7600;

轉換十六進位為常用的十進制的數值是很複雜的，因為十六進制數值的基數為 16 而十進制數值的基數為 10。要將十六進位顏色轉換為普通的十進制數，我們必須將每個數字乘以 16 的冪次方。下面顯示了十六進制值如何轉換為普通的十進制數。

FF = (15 16^0)^ (15 16^1)^ = 15 1 15 16 = 15 140 = 255

#76 = ( 7 16^0)^ ( 6 16 ^1)^ = 7 1 6 16 = 7 96 = 103

00 = ( 0 16^0)^ ( 0 16^1)^ = 0 1 0 16 = 0 0 = 0

##########################################################。 ##為了簡化計算，我們可以只取一個十六進位顏色的第一個數字，然後再乘以第二個數字再乘以16。這如下所示，使用與上面相同的數字。這是因為任何冪為 0 的數字等於數字 1，冪為 1 的 16 等於數字 16。 ######FF = 15 (15 16) = 255######76 = 7 ( 6 16) = 103######00 = 0 ( 0 * 16) = 0#### ##推薦教學：《###CSS教學###》###

以上是如何使用 CSS 顏色？的詳細內容。更多資訊請關注PHP中文網其他相關文章！