CSS3에서는 hsla() 함수를 사용하여 색상, 채도, 밝기, 투명도를 사용하여 색상을 정의합니다. 구문은 "hsla(색조 값, 채도 값, 밝기 값, 투명도 값)"입니다. 색상 값 값 범위는 "0~360", 채도 및 명도 값 범위는 "0%~100%", 투명도 값 범위는 "0~1"입니다.
이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
css3에서 hsla()의 기능은 색상을 정의하는 것입니다.
hsla() 함수는 색상을 정의하기 위해 색조, 채도, 밝기 및 투명도를 사용합니다.
HSLA는 Hue, Saturation, Lightness, Alpha(영어: Hue, Saturation, Lightness, Alpha)를 의미합니다.
색조(H)는 색의 기본 속성으로, 빨간색, 노란색 등 우리가 흔히 색 이름이라고 부르는 것입니다.
채도(S)는 색상의 순도를 의미하며, 낮을수록 색상이 점차 회색으로 변합니다.
밝기(L)는 0~100%입니다. 밝기를 높이면 색상이 흰색으로 변경되고, 밝기를 낮추면 색상이 검정색으로 변경됩니다.
투명도(A)는 0에서 1 사이의 값을 가지며 투명도를 나타냅니다.
구문:
hsla(hue, saturation, lightness, alpha)
| Value | Description |
|---|---|
| hue - Hue | 정의 Hue(0 ~ 360) - 0(또는 360)은 빨간색, 녹색, 2 40은 푸른 색상화 - 포화 |
| 조명 - 밝기 0%는 어둡고 50%는 정상입니다. %는 흰색 | |
| alpha - 투명도 | 투명도 정의 0(완전 투명) ~ 1(완전 불투명) |
예: <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#p1 {background-color:hsla(120,100%,50%,0.3);}
#p2 {background-color:hsla(120,100%,75%,0.3);}
#p3 {background-color:hsla(120,100%,25%,0.3);}
#p4 {background-color:hsla(120,60%,70%,0.3);}
#p5 {background-color:hsla(290,100%,50%,0.3);}
#p6 {background-color:hsla(290,60%,70%,0.3);}
</style>
</head>
<body>
<p>HSL 颜色，并使用透明度:</p>
<p id="p1">绿色</p>
<p id="p2">浅绿</p>
<p id="p3">暗绿</p>
<p id="p4">柔和的绿色</p>
<p id="p5">紫色</p>
<p id="p6">柔和的紫色</p>
</body>
</html>로그인 후 복사 | (동영상 공유 학습: css 동영상 튜토리얼 , |
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
