[func] CSS - hsla () 함수 - HSLA (Hue-Saturation-Lightness-Alpha) 모델 사용해 색상 정의

hsla() 예제

 

<style>

p {padding:15px;}

p {background-color:hsla(0,100%,50%,0.3);}

</style>

<p>빨강+투명도가미</p>

결과값

hsla() 정의

 

HSLA (Hue-Saturation-Lightness-Alpha 모델) 사용해 원통형 좌표로 색상 정의

 

---

1.
Hue : 색상

Saturation : 채도
Lightness : 명도

Alpha : 투명도

2.

CSS3

 

3.

IE9 이상 주요 최신 브라우저 지원

 

hsla() 구문

 

hsla(hue, saturation, lightness, alpha)

 

---

[매개변수]

hue

색상 (= 색조 = 색깔)
※ 0 ~ 360  (숫자만 기재)
※ 0 (= 360)은 빨간색, 120은 녹색, 240은 파란색

saturation

채도 (= 컬러 정도)

※  0 ~ 100 % (% 단위 필수 기재)
※ 0%는 음영, 100%는 컬러 최대치

lightness

명도 (= 밝기)

※ 0 ~ 100 %  (% 단위 필수 기재)

※ 0 %는 검은색이고, 50 %는 보통이며 100 %는 흰색

 

alpha

불투명도
※  0.0 ~ 1.0  (숫자만 기재)
※ 0.0은 완전 투명, 1.0은 완전 불투명