CSS3 색상
CSS는 색 이름, 16 진수 및 RGB 색상을 지원합니다.
또한, CSS3도 소개 :
- RGBA 색상
- HSL 색상
- HSLA 색상
- 불투명
브라우저 지원
표의 수치는 완전히 CSS3 색상 값 / 속성을 지원 제 브라우저 버전을 지정.
| 재산 | |||||
|---|---|---|---|---|---|
| RGBA, HSL, and HSLA | 4.0 | 9.0 | 3.0 | 3.1 | 10.1 |
| 불투명 | 4.0 | 9.0 | 2.0 | 3.1 | 10.1 |
RGBA 색상
RGBA 색상 값은 함께 RGB 색 값의 확장이다 alpha 컬러 불투명도를 지정 - 채널.
RGBA (적, 녹, 청, :는 RGBA 색상 값으로 지정되는 alpha ). alpha 매개 변수는 0.0 (완전 투명)과 1.0 (완전 불투명) 사이의 숫자입니다.
RGBA (255, 0, 0, 0.2);
RGBA (255, 0, 0, 0.4);
RGBA (255, 0, 0, 0.6);
RGBA (255, 0, 0, 0.8);
다음의 예는 다른 RGBA 색상을 정의합니다 :
예
#p1 {background-color: rgba(255, 0, 0, 0.3);} /* red
with opacity */
#p2 {background-color: rgba(0, 255, 0, 0.3);} /* green with opacity */
#p3 {background-color: rgba(0, 0, 255, 0.3);} /* blue
with opacity */
»그것을 자신을 시도 HSL 색상
HSL은 색조, 채도 및 밝기를 의미합니다.
HSL (색조, 채도, 밝기) :는 HSL 색상 값이 지정됩니다.
- 색조 컬러 휠 (0에서 360까지)의 정도 :
- 0 (또는 360) 빨간색
- (120)는 녹색
- (240)은 파란색입니다
- 채도 비율의 값 : 100 % 풀 컬러입니다.
- 밝기는 비율입니다; 0 % 어두운 (검은 색)과 100 % 흰색입니다.
HSL (0, 100 %, 30 %);
HSL (0, 100 %, 50 %);
HSL (0, 100 %, 70 %);
HSL (0, 100 %, 90 %);
다음의 예는 다른 HSL 색상을 정의합니다 :
예
#p1 {background-color: hsl(120, 100%, 50%);} /* green */
#p2 {background-color: hsl(120, 100%, 75%);} /* light green */
#p3 {background-color: hsl(120, 100%, 25%);} /* dark
green */
#p4 {background-color: hsl(120, 60%, 70%);} /* pastel green */
»그것을 자신을 시도 HSLA 색상
HSLA 색상 값은 함께 HSL 색 값의 확장이다 alpha 컬러 불투명도를 지정 - 채널.
HSLA (색상, 채도, 명도, :는 HSLA 색상 값으로 지정되는 alpha ) alpha 파라미터 불투명도를 정의한다. alpha 매개 변수는 0.0 (완전 투명)과 1.0 (완전 불투명) 사이의 숫자입니다.
HSLA (0, 100 %, 30 %, 0.3);
HSLA (0, 100 %, 50 %, 0.3);
HSLA (0, 100 %, 70 %, 0.3);
HSLA (0, 100 %, 90 %, 0.3);
다음 예는 다른 HSLA 색상을 정의
예
#p1 {background-color: hsla(120, 100%, 50%, 0.3);} /* green with opacity */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);} /* light green with opacity */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);} /* dark
green with opacity */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);} /* pastel green
with opacity */
»그것을 자신을 시도 불투명
CSS3 불투명도 속성은 지정된 RGB 값에 대한 불투명도를 설정합니다.
불투명도 속성 값은 0.0 (완전 투명)과 1.0 (완전 불투명) 사이의 숫자 여야합니다.
RGB (255, 0, 0), 투명도 : 0.2;
RGB (255, 0, 0), 투명도 : 0.4;
RGB (255, 0, 0), 투명도 : 0.6;
RGB (255, 0, 0), 투명도 : 0.8;
위의 텍스트는 불투명합니다 알 수 있습니다.
다음의 예는 불투명 서로 다른 RGB 값을 보여줍니다 :
예
#p1 {background-color:rgb(255,0,0);opacity:0.6;} /* red with opacity
*/
#p2 {background-color:rgb(0,255,0);opacity:0.6;} /* green with
opacity */
#p3 {background-color:rgb(0,0,255);opacity:0.6;} /* blue
with opacity */
»그것을 자신을 시도