CSS設(shè)置顏色的方式

相信新手對(duì)如何用css設(shè)置顏色的了解處于一知半解狀態(tài)，小編給大家總結(jié)了以下內(nèi)容。如下資料是關(guān)于CSS設(shè)置顏色的內(nèi)容。

CSS 中顏色有多種不同的應(yīng)用方式；預(yù)定義的顏色名稱、rgb、rgba 以及使用十六進(jìn)制顏色值。下面的 CSS 展示的是使用預(yù)定義的顏色名稱，背景色將設(shè)置為 'purple（紫色）'。

background-color: Purple;

CSS 中有很多預(yù)定義的顏色，可以向上面寫的那樣，僅使用預(yù)定義的名稱來應(yīng)用該顏色。下面是預(yù)定義顏色的列表，這并不是所有的預(yù)定義顏色。這些名稱并不區(qū)分大小寫，所以，你全部寫成大寫或小寫都沒毛病。

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

Blue（藍(lán)色）、Aqua（水綠色）、Cyan（青色）

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

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

Gold（金色）、Yellow（黃色）

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

Brown（棕色）、Maroon（栗色）

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

Red（紅）、Green（綠）、Blue（藍(lán)）或者 rgb 是 CSS 中的另一種顏色設(shè)置方式。rgb 函數(shù)接收三個(gè)參數(shù)，分別代表紅、綠、藍(lán)。每個(gè)顏色分量的值可以是 0 到 255 中的任意整數(shù)，包含 0 和 255。0 是最小值，代表該顏色并未應(yīng)用。下面的代碼中藍(lán)色分量的值為 0，所以藍(lán)色不會(huì)被添加到顏色中。我們?cè)O(shè)置紅色分量為最亮值，綠色分量設(shè)置為一半（125）。這將會(huì)把設(shè)置為橙色。

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

透明度是另外一個(gè)在 CSS 中可以應(yīng)用到顏色中的東西。通過使用 rgba 函數(shù)你可以添加一個(gè)額外的參數(shù)來設(shè)置透明度。alpha 正是設(shè)置透明程度的。其數(shù)值是十進(jìn)制數(shù)從 0 到 1，所以、0.5 代表半個(gè)透明度。下面的代碼同樣是設(shè)置為橙色，不過還設(shè)置了一半的透明度，使它有點(diǎn)兒透明。

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

CSS 中最后還有一種設(shè)置顏色的方式，使用十六進(jìn)制數(shù)值。十六進(jìn)制數(shù)值從 0 到 F 并且給每個(gè)顏色分量?jī)刹糠郑⑶乙砸粋€(gè)主題符號(hào) '#' 開頭。十六進(jìn)制的字母部分從 A 到 F 對(duì)應(yīng)數(shù)字的 10 到 15。下面的 CSS 代碼是使用十六進(jìn)制表示的橙色。紅色部分表示為 'FF'，綠色的部分為 '76'，藍(lán)色分量為 '00'。綠色分量并不是數(shù)字 76，它是兩部分?jǐn)?shù)字 7 和數(shù)字 6。

background-color: #FF7600;

轉(zhuǎn)換十六進(jìn)制為常用的十進(jìn)制的數(shù)值是很復(fù)雜的，因?yàn)槭M(jìn)制數(shù)值的基數(shù)為 16 而十進(jìn)制數(shù)值的基數(shù)為 10。要將十六進(jìn)制顏色轉(zhuǎn)換為普通的十進(jìn)制數(shù)，我們必須將每個(gè)數(shù)字乘以 16 的冪次。下面顯示了十六進(jìn)制值如何轉(zhuǎn)換為普通的十進(jìn)制數(shù)。

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

為了簡(jiǎn)化計(jì)算，我們可以只取一個(gè)十六進(jìn)制顏色的第一個(gè)數(shù)字，然后乘以第二個(gè)數(shù)字再乘以 16。這如下所示，使用與上面相同的數(shù)字。這是因?yàn)閮鐬?0 的任何數(shù)字等于數(shù)字 1，冪為 1 的 16 等于數(shù)字 16。

FF = 15 + (15 16) = 255

76 = 7 + ( 6 16) = 103

00 = 0 + ( 0 * 16) = 0

以上就是CSS設(shè)置顏色的簡(jiǎn)略介紹，詳細(xì)使用情況還需要大家自己親自動(dòng)手使用過才能領(lǐng)會(huì)。如果想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道！