CSS3에서 hsla()의 용도는 무엇입니까?
- 青灯夜游원래의
- 2022-03-17 18:32:241952검색
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> |
웹 프론트엔드
)위 내용은 CSS3에서 hsla()의 용도는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：CSS3에서 지원하는 필터는 무엇입니까?다음 기사：CSS3에서 지원하는 필터는 무엇입니까?