CSS學習篇(八) 顏色

2021-09-20 13:03:01 字數 2386 閱讀 3083

色彩理論在設計學和美術領域中是個大學問,但是在設計**的時候,需要設計師對顏色有一定的了解才能建立出更加醒目又不失和諧的視覺效果,從而提高使用者體驗。

在css中有三種方法來表示顏色,分別是顏色名、十六進製制值、rgbhsl

在分別介紹三種表示法之前,先了解下計算機中顏色的表現原理。眾多的電子顯示器與手機裝置螢幕一致,它們裡面的背景顏色、等都是由紅(red)、綠(green)、藍(blue)三原色光進行混合相加所形成的影象,我們稱這是一種三原色光模型rgb顏色模型。兩種原色相加可以變成二次色,例如:藍綠(g+b)、品紅(r+b)和黃色(r+g),同理三種原色混合起來也會生成新的顏色——白色。

那麼,三原色在計算機中是具體怎麼定義的呢?紅綠藍三原色分別代表r、g、b,它們各自用乙個位元組(8位)來表示,即每種顏色通道分別單獨有256種不同程度的變種色,而r、g、b三種顏色搭配起來可以形成一種單獨的組合色,那麼組合排列一下可以有256*256*256=16,777,216種的顏色。

在css中只指定了部分顏色可以使用的關鍵字,而其他顏色只能通過後面幾種表示法來設定。

例如,利用顏色名在css中設定背景顏色為紅色:

background-color: red;
目前可以指定的顏色名可以參考這裡。

上面提到r、g、b三種顏色分別用乙個位元組來表示,那麼每種顏色對應十六進製制就是兩個位來表示,三種顏色合起來就是六個位來表示,那麼很自然的紅色是ff0000,綠色是00ff00,藍色0000ff,很簡單!ff代表這個位元組是全1(即255),表示這種顏色是滿值,同理如果是00就是全0,表示這種顏色是空值,如果rgb都設為0(即000000),代表的就是黑色。三原色中每種顏色都有相當於0到255之間不同程度的色值,我們可以通過設定這個值來表示不同的顏色。如:65fe33、453266、125e8f等

在css中通過十六進製制值設定乙個背景顏色為紅色:

background-color: #ff0000;
可以看到,在設定的顏色值前方需要新增乙個「#」,然後追加十六進製制值。

另外如果在同一種顏色中,兩個進製數相同,那麼可以縮寫為:

background-color: #f00;
這樣表示的同樣是紅色。

rgb設定法理論上跟十六進製制是一樣的,它使用rgb函式並傳入紅、綠、藍三個顏色值作為引數,在css中進行設定方式如下:

background-color: rgb(255, 0, 0);
第乙個引數代表紅色值,第二個引數代表綠色值,第三個引數代表藍色值,可以分別傳入0到255之間的色值,它與十六進製制值的表示是類似的,只是這裡使用十進位制引數傳入rgb函式的方式來表示。

這是一種相對rgb來說較新的方法,它由乙個hsl函式來傳入三個引數來表示顏色,不過這三個引數不是簡單的代表r、g、b三種顏色,而是色調(hue)飽和度(saturation)明度(lightness),它同樣可以用來表示1670萬多種顏色。

色調:顏色的底色調。這個值在0到360之間,表示色環的角度。

飽和度:飽和度是多少?這需要乙個從0-100%的值,其中0是沒有顏色(它將顯示為灰色),100%是全彩色飽和度。

明度:顏色有多亮或明亮?這需要乙個從0-100%的值,其中0是無光(它會出現全黑的),100%是充滿光的(它會出現全白)。

簡單來說,色調就是顏色的值,這是在乙個色環中指定的,用來確定顏色(0/360代表紅,120代表綠,240代表藍)。而飽和度用來調節顏色的純度(深淺),而明度代表顏色的亮度(明暗)。

使用hsl來設定背景顏色為紅色:

background-color: hsl(0,100%,50%);

rgb和hsl都有乙個透明版本的函式,rgba和hsla,它們都增加了第四個引數用於設定顏色的透明度,這是乙個0到1之間的數值來表示,0代表完全透明,1代表完全不透明。

例如,利用它們分別設定半透明的紅色:

background-color: rgba(255, 0, 0, 0.5);
background-color: hsla(0, 100%, 50%, 0.5);
設定透明度除了上面的*a版本函式之外,css中還有乙個單獨的屬性可以設定——opacity,同樣是0-1的值,0代表完全透明,1代表完全不透明。不過有乙個區別就是,*a版本函式只會設定設定對應顏色的不透明度,但是opacity會對整個選擇器所有元素(包括顏色和文字)都進行透明度的設定。

學習筆記 CSS篇

1.static 預設情況 2.relative 相對的,與正常位置對比 3.absolute 絕對的,與父元素位置對比 4.fixed 相對於瀏覽器視窗固定 5.sticky 粘性的,滾動後超出區域就粘在目標位置 1.margin 外邊距 2.border 邊框 3.padding 內邊距 4.c...

總結CSS3新特性 顏色篇

css3新增加了hsl hsla rgb rgba 四個函式來建立color值 hsl函式 h 色調 s 飽和度 l 亮度 色調 為0 360之間的數值 經實驗,可以為小數 飽和度與亮度 均為百分比 下圖截自 當亮度為100 時為白色,當亮度為0 為黑色 飽和度100 以及亮度50 時生成的顏色均為...

總結CSS3新特性 顏色篇

css3新增加了hsl hsla rgb rgba 四個函式來建立color值 hsl函式 h 色調 s 飽和度 l 亮度 色調 為0 360之間的數值 經實驗,可以為小數 飽和度與亮度 均為百分比 下圖截自 當亮度為100 時為白色,當亮度為0 為黑色 飽和度100 以及亮度50 時生成的顏色均為...