CSS3 튜토리얼(10): CSS3 HSL 문 설정 Color_css3_CSS_웹 페이지 제작

웹페이지 제작 Webjx 기사 소개: CSS3 HSL 문을 사용하여 색상을 설정하는 데에도 사용됩니다. 다음은 무엇입니까? HSLA? 예, 이는 RGBA와 동일한 효과를 갖습니다. 색상은 CSS3 HSL 선언을 사용하여 설정됩니다. 다음은 무엇입니까? HSLA? 예, 이는 RGBA와 동일한 효과를 갖습니다. 이전 기사

CSS3 HSL 선언을 사용하여 색상을 설정하는 것도 사용됩니다. 다음은 무엇입니까? HSLA? 예, 이는 RGBA와 동일한 효과를 갖습니다.
CSS3 HSL 선언을 사용하면 색상을 설정하는 데에도 사용됩니다. 다음은 무엇입니까? HSLA? 예, 이는 RGBA와 동일한 효과를 갖습니다.
이전 기사: CSS3 튜토리얼(9): RGB 색상 설정
HSL 문은 Hue(H), Saturation(s) 및 Lightness(L)를 사용하여 색상을 설정합니다.
색조는 색상환에서 파생됩니다. 0과 360은 빨간색, 120에 가까운 값은 녹색, 240은 파란색입니다.
채도 값은 백분율입니다. 0%는 회색조이고, 100%는 가장 높은 채도입니다.
명도 값도 백분율입니다. 0%는 가장 어둡고, 50%는 평균이며, 100%는 채도입니다. 가장 밝다.
무작위 생각: 왜 "ligtness"인가요? 아마도 저는 Photoshop의 "밝기"에 더 익숙할 것입니다...
브라우저 호환성:
현재 HSL 및 HSLA는 Firefox, Google Chrome 및 Safari 브라우저에서 잘 지원되며 접두사 CSS3 HSL이 필요하지 않습니다.

위 데모는 다음 스타일로 구현됩니다.
div.hslL1 { background:hsl(320, 100 %, 50%); 높이:20px; } div.hslL2 { 배경:hsl(320, 50%, 50%); 높이:20px } div.hslL3 { 배경:hsl(320, 100%, 75%); 높이: 20px; } div.hslL4 { 배경:hsl(202, 100%, 50%); 높이:20px; } div.hslL5 { 배경:hsl(202, 50%, 50%) } div .hslL6 { 배경:hsl(202, 100%, 75%); 높이:20px; }
브라우저 지원:

Firefox(3.05…)

Google Chrome(1.0.154 … )

Google Chrome(2.0.156…)

Internet Explorer(IE7, IE8 RC1)

Opera(9.6…)

Safari(3.2 . 1 windows...) CSS3 HSLA

위의 효과는 다음 스타일로 달성됩니다:
div.hslaL1 { background:hsla(165, 35%, 50%, 0.2) ; 높이:20px; } div.hslaL2 { 배경:hsla(165, 35%, 50%, 0.4) } div.hslaL3 { 배경:hsla(165, 35%, 50% , 0.6); 높이:20px; } div.hslaL4 { 배경:hsla(165, 35%, 50%, 0.8); 높이:20px; } div.hslaL5 { 배경:hsla(165, 35%, 50%, 1.0 ); 높이:20px ; }
브라우저 지원:

Firefox(3.05…)

Google Chrome(1.0.154…)

Google Chrome(2.0.156 …)

Internet Explorer(IE7, IE8 RC1)

Opera(9.6…)

Safari(3.2.1 windows…)

위 내용은 CSS3 튜토리얼(10) :CSS3 HSL 문 설정 color_css3_CSS_웹 페이지 제작 콘텐츠, 더 많은 관련 콘텐츠를 보려면 PHP 중국어 웹사이트(www.php.cn)에 주목하세요!