日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間:8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
CSS顏色設(shè)置(6種方法)
我們在顯示屏上看到的各種顏色都是通過紅(red)、綠(green)、藍(blue)三原色組合而成的,按不同的比例混合這三種顏色就可以得到其它顏色,通過調(diào)整紅、綠、藍三種顏色的數(shù)值可以最大限度的控制顏色。

成都創(chuàng)新互聯(lián)服務(wù)項目包括巴宜網(wǎng)站建設(shè)、巴宜網(wǎng)站制作、巴宜網(wǎng)頁制作以及巴宜網(wǎng)絡(luò)營銷策劃等。多年來,我們專注于互聯(lián)網(wǎng)行業(yè),利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等,向廣大中小型企業(yè)、政府機構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案,巴宜網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟效益。目前,我們服務(wù)的客戶以成都為中心已經(jīng)輻射到巴宜省份的部分城市,未來相信會繼續(xù)擴大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任!

CSS 中提供了一些屬性(例如 color、background)來設(shè)置 HTML 元素的顏色(例如元素的背景顏色或字體顏色),我們可以通過不同形式的值來指定顏色,如下表所示:

描述 實例
顏色名稱 使用顏色名稱來設(shè)置具體的顏色,比如 red、blue、brown、lightseagreen 等,顏色名稱不區(qū)分大小寫 color: red;
十六進制碼 使用十六進制碼以 #RRGGBB 或 #RGB(比如 #ff0000)的形式設(shè)置具體顏色,"#" 后跟 6 位或 3 位十六進制字符(0-9, A-F) color: #f03;
RGB 通過 rgb() 函數(shù)對 red、green、blue 三原色的強度進行控制,從而實現(xiàn)不同的顏色 color: rgb(255,0,51);
RGBA RGBA 擴展了 RGB,在 RGB 的基礎(chǔ)上增加了 alpha 通道來設(shè)置顏色的透明度,需要使用 rgba() 函數(shù)實現(xiàn) color: rgba(255,0,0,0.1);
HSL 通過 hsl() 函數(shù)對顏色的色調(diào)、飽和度、亮度進行調(diào)節(jié),從而實現(xiàn)不同的顏色 color: hsl(120,100%,25%);
HSLA HSLA 擴展了 HSL,在 HSL 的基礎(chǔ)上增加了 alpha 通道來設(shè)置顏色的透明度,需要使用 hsla() 函數(shù)實現(xiàn) color: hsla(240,100%,50%,0.5);

1. 顏色名稱

使用顏色名稱來設(shè)置顏色是最簡單的方法。CSS 中定義了一些表示顏色的關(guān)鍵字,如下表中所示,使用這些關(guān)鍵字可以輕松的為元素設(shè)置顏色。

顏色名 顏色 顏色名 顏色
aqua 天藍 black 黑色
blue 藍色 fuchsia 品紅
gray 灰色 green 綠色
lime 淺綠 maroon 紫紅色
navy 深藍 olive 橄欖色
orange 橙色 purple 紫色
red 紅色 silver 淺灰色
teal 藍綠色 white 白色
yellow 黃色    

除了上表中介紹的 17 個顏色外,瀏覽器中還支持很多的顏色名稱,但不同的瀏覽器之間對顏色的解析可能存在差異,為了安全起見,不建議您在 CSS 中使用顏色名稱來指定顏色。

2. 十六進制碼

十六進制碼是指通過一個以
# 開頭的 6 位十六進制數(shù)(0~9,a~f)表示顏色的方式,這個六位數(shù)可以分為三組,每組兩位,依次表示 red、green、blue 三種顏色的強度,例如:

h1 {
    color: #ffa500;
}
p {
    color: #00ff00;
}

您可以使用 PhotoShop、Fireworks 等制圖軟件來獲取顏色的十六進制碼,如下圖所示:



圖:獲取顏色的十六進制碼

提示:在使用十六進制碼表示顏色時,如果每組的兩個十六進制數(shù)是相同的,例如 #00ff00、#ffffff、#aabbcc,則可以將它們簡寫為 #0f0、#fff、#abc。

3. RGB

RGB 是 red、green、blue 的縮寫,它是一種色彩模式,可以通過對 red、green、blue 三種顏色的控制來實現(xiàn)各式各樣的顏色。CSS 中要使用 RGB 模式來設(shè)置顏色需要借助 rgb() 函數(shù),函數(shù)的語法格式如下:

rgb(red, green, blue)

其中 red、green、blue 分別表示三原色紅、綠、藍的強度,這三個參數(shù)的取值可以是 0~255 之間的整數(shù),也可以是 0%~100% 之間百分比數(shù)值。如下例所示:

h1 {
    color: rgb(255, 165, 0);
}
p {
    color: rgb(0%, 100%, 0%);
}

4. RGBA

RGBA 是 RGB 的擴展,在 RGB 的基礎(chǔ)上又增加了對 Alpha 通道的控制,Alpha 通道可以設(shè)置顏色的透明度。

您需要借助 rgba() 函數(shù)來使用 RGBA 模式,該函數(shù)需要接收四個參數(shù),除了 red、green、blue 三種顏色的強度外,還需要一個 0~1 之間的小數(shù)來表示顏色的透明度,其中 0 表示完全透明,1 表示完全不透明。rgba() 函數(shù)的語法格式如下:

rgba(red, green, blue, alpha);

其中 red、green、blue 分別表示三原色紅、綠、藍的強度,alpha 表示顏色的透明度,例如:

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

5. HSL

HSL 是 Hue(色調(diào))、Saturation(飽和度)、Lightness(亮度)的縮寫,它同樣也是一種色彩模式,可以通過對色調(diào)、飽和度、亮度三個屬性的調(diào)節(jié)來實現(xiàn)不同顏色的。CSS 中使用 HSL 模式需要借助 hsl() 函數(shù),函數(shù)的語法格式如下:

hsl(hue, saturation, lightness)

語法說明如下:

1) hue

參數(shù) hue 表示顏色在色盤上的度數(shù)(從 0 到 360),0 或 360 表示紅色,120 表示綠色,240 表示藍色,如下圖所示;



圖:hue參數(shù)說明

2) saturation

參數(shù) saturation 為一個百分比數(shù)值,表示色彩的飽和度,0% 表示灰色,100% 表示全彩。



圖:saturation 參數(shù)說明

3) lightness

參數(shù) lightness 同樣為一個百分比數(shù)值,表示顏色的亮度,0% 是黑色(沒有亮度),50% 為最合適的亮度(既不發(fā)黑也不過亮),100% 是白色(曝光嚴重)。



圖:lightness 參數(shù)說明

6. HSLA

HSLA 是 HSL 的擴展,在 HSLA 中增加了對顏色透明度的控制,其余與 HSL 相同。CSS 中使用 HSLA 模式需要借助 hsla() 函數(shù),函數(shù)的語法格式如下:

hsla(hue, saturation, lightness, alpha)

參數(shù) alpha 是一個 0 ~ 1 之間小數(shù),用來表示顏色的透明度,0 表示完全透明,而 1 表示完全不透明。

【示例】通過不同的方式來為 HTML 元素設(shè)置顏色:




    CSS顏色
    


    

color: rgb(255, 0, 0);

color: rgba(255, 0, 0, 0.5);

color: #EE82EE;

color: #E8E;

color: hsl(0, 50%, 50%);

color: hsla(0, 50%, 50%, 0.5);

color: green;

運行結(jié)果如下圖所示:



圖:CSS 中顏色的設(shè)置

新聞標題:CSS顏色設(shè)置(6種方法)
轉(zhuǎn)載來于:http://www.dlmjj.cn/article/dhgcosp.html