來電咨詢
191-1582-9360

網站開(kāi)發進階(六十七)淺談cs化司s中hsl()和hsla()設置顔色值的方法與應木器用

時(shí)間:2021-12-15 16:51:28

【摘要】 HSL 是CSS3引進的一種将 RGB 色彩模型中的點在坐标系中長她的表示法。這兩種表示法試圖做到比基于笛卡爾坐标系的幾何結構 RGB也子 更加直觀。

前言

HSL 是CSS3引進的一種将 RGB 色彩模型中的點在坐标系中的表示法。這兩種表示法試圖人很做到比基于笛卡爾坐标系的幾何結構 RGB 更加直觀。
在這裡插入圖片描述

定義與用法

hsl() 函數使用色相飽和度亮度來定義顔色。

HSL 即色相飽和度亮度(英語:HueSaturationLightness)。

  • 色相(H)是色彩的基本屬性,就是平常所說(shuō)的顔色名稱農機,如(rú)紅色、黃色等。

  • 飽和度(S)是指色彩的純度,越高色彩越純,低(dī)則逐漸變灰,取值&n村筆bsp;0-100% 。

  • 亮度(L),取值 0-100%,增加亮度,顔色會(huì)向白色變化;減少亮度,顔色會(huì)向黑色變新懂化。

CSS 語法

hsl(hue, saturation, lig頻用htness)

描述



hue - 色相

定義色相 (0 到 360) - 0 (或 360) 為(wè風船i)紅色, 120 為(wèi)綠色, 240 為(wèi)藍色

saturation - 飽和度

定義飽和度; 0% 為(wèi)灰色, 100% 全色

lightness - 亮度

定義亮度 0% 為(wèi)暗(àn), 50% 為(她商wèi)普通(tōng), 100% 為(wèi)白拿到

實例

定義 HSL 顔色:

image.png

表格中的數字表示支持該函數的第一個浏覽器(qì)版本号拿劇。
在這裡插入圖片描述

hsla()

css中存在兩種設置顔色值的方式:hsl()hsla(),它們(men)基本上都是采用了HSL色彩模式的方法來設置顔色,接下來就來看看什麼是少答HSLA色彩模式

HSLA是在HSL的基礎上增加了一個透明度(A)的設置,取值0~1之間。
在這裡插入圖片描述

拓展閱讀


來源:https://bbs.huaweic房國loud.com/blogs/249321