hsl() 및 hsla()를 사용하여 CSS에서 색상 값을 설정하는 방법에 대한 간략한 설명(그림과 텍스트로 자세한 설명)
- 青灯夜游원래의
- 2018-10-17 10:57:406633검색
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:
채도나 밝기만 변경했을 뿐 색상은 동일하다는 것을 알 수 있습니다. 다른 색상이 됩니다
background:hsl(320, 100%, 50%); background:hsl(320, 50%, 50%); background:hsl(320, 100%, 75%);
%20%EB%B0%8F%20hsla()%EB%A5%BC%20%EC%82%AC%EC%9A%A9%ED%95%98%EC%97%AC%20CSS%EC%97%90%EC%84%9C%20%EC%83%89%EC%83%81%20%EA%B0%92%EC%9D%84%20%EC%84%A4%EC%A0%95%ED%95%98%EB%8A%94%20%EB%B0%A9%EB%B2%95%EC%97%90%20%EB%8C%80%ED%95%9C%20%EA%B0%84%EB%9E%B5%ED%95%9C%20%EC%84%A4%EB%AA%85(%EA%B7%B8%EB%A6%BC%EA%B3%BC%20%ED%85%8D%EC%8A%A4%ED%8A%B8%EB%A1%9C%20%EC%9E%90%EC%84%B8%ED%95%9C%20%EC%84%A4%EB%AA%85) "153974305188597hsl() 및 hsla()를 사용하여 CSS에서 색상 값을 설정하는 방법에 대한 간략한 설명(그림과 텍스트로 자세한 설명)")
background:hsl(202, 100%, 50%); background:hsl(202, 50%, 50%); background:hsl(202, 100%, 75%);
%20%EB%B0%8F%20hsla()%EB%A5%BC%20%EC%82%AC%EC%9A%A9%ED%95%98%EC%97%AC%20CSS%EC%97%90%EC%84%9C%20%EC%83%89%EC%83%81%20%EA%B0%92%EC%9D%84%20%EC%84%A4%EC%A0%95%ED%95%98%EB%8A%94%20%EB%B0%A9%EB%B2%95%EC%97%90%20%EB%8C%80%ED%95%9C%20%EA%B0%84%EB%9E%B5%ED%95%9C%20%EC%84%A4%EB%AA%85(%EA%B7%B8%EB%A6%BC%EA%B3%BC%20%ED%85%8D%EC%8A%A4%ED%8A%B8%EB%A1%9C%20%EC%9E%90%EC%84%B8%ED%95%9C%20%EC%84%A4%EB%AA%85) "153974350337740hsl() 및 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:
%20%EB%B0%8F%20hsla()%EB%A5%BC%20%EC%82%AC%EC%9A%A9%ED%95%98%EC%97%AC%20CSS%EC%97%90%EC%84%9C%20%EC%83%89%EC%83%81%20%EA%B0%92%EC%9D%84%20%EC%84%A4%EC%A0%95%ED%95%98%EB%8A%94%20%EB%B0%A9%EB%B2%95%EC%97%90%20%EB%8C%80%ED%95%9C%20%EA%B0%84%EB%9E%B5%ED%95%9C%20%EC%84%A4%EB%AA%85(%EA%B7%B8%EB%A6%BC%EA%B3%BC%20%ED%85%8D%EC%8A%A4%ED%8A%B8%EB%A1%9C%20%EC%9E%90%EC%84%B8%ED%95%9C%20%EC%84%A4%EB%AA%85) "153974447468790hsl() 및 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()는 Firefox, Google Chrome, Safari와 같은 브라우저에서 더 잘 지원되며 지원될 수 있습니다. 접두사 없이 사용됩니다.
요약: 위 내용이 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다. 더 많은 관련 튜토리얼을 보려면 CSS 기본 비디오 튜토리얼 , CSS3 비디오 튜토리얼 , bootstrap 비디오 튜토리얼 을 방문하세요!
위 내용은 hsl() 및 hsla()를 사용하여 CSS에서 색상 값을 설정하는 방법에 대한 간략한 설명(그림과 텍스트로 자세한 설명)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!