CSS 색상 모듈 레벨 4는 16진수 값으로 RGBA 색상 표기를 어떻게 단순화합니까?

Mary-Kate Olsen

풀어 주다： 2024-12-13 00:29:12

원래의

933명이 탐색했습니다.

How Does CSS Color Module Level 4 Simplify RGBA Color Notation with Hexadecimal Values?

CSS의 16진수 RGBA 표기법: 미래 공개

현재 16진수 색상 표기법

CSS에서는 16진수 표기법은 일반적으로 색상을 지정하는 데 사용됩니다. 예를 들어 #ff0000은 순수한 빨간색을 나타내고 #rgba(255, 0, 0, 0.5)는 반투명한 빨간색을 만듭니다.

4자리와 8자리 16진수 RGBA 표기법 소개

다가오는 CSS 컬러 모듈 레벨 4에서는 4와 8자리 16진수 RGBA 표기법은 16진수 형식으로 투명한 색상을 보다 간결하게 표현하는 방법을 제공합니다.

8자리 16진수 표기법

RRGGBBAA

처음 6자리는 RGB 색상을 지정합니다. 표준 6자리 표기법과 같습니다.
마지막 두 자리는 알파 채널을 나타내며, "00"은 완전히 투명하고 "ff"는 투명하지 않습니다.
예를 들어 #0000ffcc는 다음을 나타냅니다. 약간 투명한 파란색(rgba(0, 0, 100%, 80%)).

4자리 16진수 표기법

RGBA

첫 번째 숫자는 빨간색 채널을 지정합니다. (8자리 중 첫 번째 숫자처럼 표기법).
나머지 세 자리는 표준 rgba 표기법처럼 각각 녹색, 파란색, 알파 채널을 나타냅니다.
예를 들어 #0000은 완전히 투명한 검정색(# 0000(알파 채널은 00으로 설정).

혜택 새로운 표기법

4자리 및 8자리 16진수 RGBA 표기법은 다음과 같은 이점을 제공합니다.

rgba 표기법보다 더 간결하며, 특히 단순한 알파 값을 가진 색상의 경우 더욱 그렇습니다. .
16진수와 10진수를 쉽게 변환할 수 있습니다.

브라우저 지원 및 사용

새로운 16진수 RGBA 표기법은 아직 주요 브라우저에서 지원되지 않습니다. 향후 버전에서 지원될 예정입니다.

그때까지는 아래와 같이 대체 구문을 사용하여 최신 브라우저와 레거시 브라우저를 모두 지원할 수 있습니다.

figure {
  background: #FEFE7F;
  color: #3F3FFE;
  
  background: rgba(255, 255, 0, 0.5);
  color: rgba(0, 0, 255, 0.75);
  
  background: #ffff007F;
  color: #0000ffbe;
}

로그인 후 복사

위 내용은 CSS 색상 모듈 레벨 4는 16진수 값으로 RGBA 색상 표기를 어떻게 단순화합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!