hsl() 및 hsla()를 사용하여 CSS에서 색상 값을 설정하는 방법에 대한 간략한 설명(그림과 텍스트로 자세한 설명)-CSS 튜토리얼-php.cn

hsl() 및 hsla()를 사용하여 CSS에서 색상 값을 설정하는 방법에 대한 간략한 설명(그림과 텍스트로 자세한 설명)

青灯夜游

풀어 주다： 2018-10-17 11:21:37

원래의

6653명이 탐색했습니다.

css에서 색상 값을 설정하기 위해 hsl() 및 hsla()를 사용하는 방법은 무엇입니까? 이번 글에서는 hsl()과 hsla()를 사용하여 CSS에서 색상 값을 설정하는 방법에 대해 간략하게 설명하겠습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

CSS에서 색상 값을 설정하는 방법에는 hsl()과 hsla()가 있습니다. 기본적으로 HSL 색상 모드를 사용하여 색상을 설정합니다. 그럼 HSL 색상 모드가 무엇인지 살펴보겠습니다.

HSL 색상 모드는 색상(H), 채도(S), 명도(L)의 세 가지 색상 채널을 변경하고 이를 서로 중첩하여 다양한 색상을 얻습니다. HSL 색상 표준은 인간의 시각으로 인지할 수 있는 거의 모든 색상을 포함하며 현재 가장 널리 사용되는 색상 시스템 중 하나입니다.

HSL은 색상, 채도, 명도 3채널의 색상을 나타냅니다

그리고 HSLA는 HSL을 기반으로 투명도(A) 설정을 추가합니다.

이제 HSL 색상 모드가 무엇인지 알았으니 CSS에서 hsl() 및 hsla()를 사용하여 색상 값을 설정하는 방법을 살펴보겠습니다.

css의 hsl() 및 색상 값에 대한 기본 구문 

hsl() in css:

hsl(H,S,L);

로그인 후 복사

H(Hue: Hue): 색상환에서 파생됩니다. 여기서 0과 360은 빨간색이고 120에 가까운 것은 빨간색입니다. 녹색, 240은 파란색입니다.

S(채도: 채도): 값은 백분율이며, 0%는 회색조를 나타내고, 100%는 가장 높은 채도를 나타냅니다.

L(밝기: 밝기): 값도 백분율입니다. 여기서 0%는 가장 어두운 것을 나타내고, 50%는 평균을 나타내고, 100%는 가장 밝은 것을 나타냅니다.

간단한 코드 예제를 사용하여 hsl()이 색상 값을 설정하는 방법을 확인할 수 있습니다.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>hsl()和颜色</title>
		<style>
			.demo{width: 400px;height: 240px;margin: 50px auto;}
			.hslL1 { background:hsl(320, 100%, 50%); height:40px; }      
			.hslL2 { background:hsl(320, 50%, 50%); height:40px; }      
			.hslL3 { background:hsl(320, 100%, 75%); height:40px; }      
			.hslL4 { background:hsl(202, 100%, 50%); height:40px; }      
			.hslL5 { background:hsl(202, 50%, 50%); height:40px; }      
			.hslL6 { background:hsl(202, 100%, 75%); height:40px; }  
		</style>
	</head>
	<body>
		<div class="demo">
			<div class="hslL1"></div>
			<div class="hslL2"></div>
			<div class="hslL3"></div>
			<div class="hslL4"></div>
			<div class="hslL5"></div>
			<div class="hslL6"></div>
		</div>
	</body>
</html>

로그인 후 복사

Rendering:

hsl() 및 hsla()를 사용하여 CSS에서 색상 값을 설정하는 방법에 대한 간략한 설명(그림과 텍스트로 자세한 설명)

채도나 밝기만 변경했을 뿐 색상은 동일하다는 것을 알 수 있습니다. 다른 색상이 됩니다

background:hsl(320, 100%, 50%); 
background:hsl(320, 50%, 50%);     
background:hsl(320, 100%, 75%);

로그인 후 복사

hsl() 및 hsla()를 사용하여 CSS에서 색상 값을 설정하는 방법에 대한 간략한 설명(그림과 텍스트로 자세한 설명)

background:hsl(202, 100%, 50%); 
background:hsl(202, 50%, 50%);
background:hsl(202, 100%, 75%);

로그인 후 복사

hsl() 및 hsla()를 사용하여 CSS에서 색상 값을 설정하는 방법에 대한 간략한 설명(그림과 텍스트로 자세한 설명)

css의 hsla() 기본 구문과 색상 값

hsla():

hsla(H,S,L,A);

로그인 후 복사

hsla()의 H, S, L 및 hsl()은 동일합니다. 모두 색상, 채도, 밝기를 나타냅니다. 기본 설정도 동일하므로 여기서는 소개하지 않겠습니다. hsla()의 A 속성 값을 살펴보겠습니다.

A(투명도: Alpha): 값은 0과 1 사이의 숫자입니다. 여기서 0은 불투명을 나타내고 1은 완전히 투명함을 나타냅니다.

간단한 코드 예제를 통해 hsla()가 색상 값을 설정하는 방법을 살펴보겠습니다.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.demo{width: 400px;height: 240px;margin: 50px auto;}
			.hslaL1 { background:hsla(165, 35%, 50%, 0.2); height:40px; }      
			.hslaL2 { background:hsla(165, 35%, 50%, 0.4); height:40px; }      
			.hslaL3 { background:hsla(165, 35%, 50%, 0.6); height:40px; }      
			.hslaL4 { background:hsla(165, 35%, 50%, 0.8); height:40px; }      
			.hslaL5 { background:hsla(165, 35%, 50%, 1.0); height:40px; }  
		</style>
	</head>
	<body>
		<div class="demo">
			<div class="hslaL1"></div>
			<div class="hslaL2"></div>
			<div class="hslaL3"></div>
			<div class="hslaL4"></div>
			<div class="hslaL5"></div>
			<div class="hslaL6"></div>
		</div>
	</body>
</html>

로그인 후 복사

Rendering:

hsl() 및 hsla()를 사용하여 CSS에서 색상 값을 설정하는 방법에 대한 간략한 설명(그림과 텍스트로 자세한 설명)

위 예제에서 색상, 채도, 밝기는 다음과 같습니다. 마찬가지로 투명도만 변경해도 색상이 다르게 표시됩니다.

background:hsla(165, 35%, 50%, 0.2); 
background:hsla(165, 35%, 50%, 0.4);
background:hsla(165, 35%, 50%, 0.6); 
background:hsla(165, 35%, 50%, 0.8); 
background:hsla(165, 35%, 50%, 1.0);

로그인 후 복사

hsl()과 hsla()의 브라우저 호환성을 살펴보겠습니다.

hsl() 및 hsla()를 사용하여 CSS에서 색상 값을 설정하는 방법에 대한 간략한 설명(그림과 텍스트로 자세한 설명)