CSS 참조 가이드

CSS @규칙(RULES)

CSS 속성 전체

CSS @charset 규칙 CSS 함수(Function)

CSS rgba() 함수

CSS rgba() 함수는 alpha 투명도와 함께 사용할 때 CSS를 제공하는 데 사용됩니다. RGB 색상 값과 alpha 값을 지정하여 색상의 투명도를 결정할 수 있습니다.

CSS 함수

온라인 예제

RGBA 색상을 사용하고 불투명도를 사용하여:

예제

!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>기본 가이드(oldtoolbag.com)</title>
<style>
#p1　{background-color:rgb(255,0,0,0.3);}
#p2　{background-color:rgb(0,255,0,0.3);}
#p3　{background-color:rgb(0,0,255,0.3);}
#p4　{background-color:rgb(192,192,192,0.3);}
#p5　{background-color:rgb(255,255,0,0.3);}
#p6　{background-color:rgb(255,0,255,0.3);}
</style>
</head>
<body>
<p>RGB 색상, 불투명도를 사용하여:</p>
<p id="p1">빨간색</p>
<p id="p2">녹색</p>
<p id="p3">파란색</p>
<p id="p4">회색</p>
<p id="p5">노란색</p>
<p id="p6">수박색</p>
</body>
</html>

테스트해 보세요 ‹/›

정의와 사용법

rgba() 함수는 빨간색(R), 녹색(G), 파란색(B), 불투명도(A)의 합성을 통해 다양한 색상을 생성합니다.

RGBA는 빨간색, 녹색, 파란색, 불투명도(영어: Red, Green, Blue, Alpha)를 의미합니다.

빨간색(R)0부터 255 사이의 정수는 색상의 빨간 부분을 나타냅니다.
녹색(G)0부터 255 사이의 정수는 색상의 녹색 부분을 나타냅니다.
파란색(B)0부터 255 사이의 정수는 색상의 파란 부분을 나타냅니다.
불투명도(A)0~1 사이에서, 불투명도를 나타냅니다.

지원 버전: CSS3

브라우저 호환성

표에서의 숫자는 이 함수를 지원하는 첫 번째 브라우저 버전 번호를 나타냅니다.

함수
rgba()	1.0	4.0	1.0	1.0	3.5

CSS 문법

rgba(red, green, blue, alpha)

값	설명
red	빨간색 값을 정의하려면, 범위는 0 ~ 255또한 0% ~ 100%.
green	녹색 값을 정의하려면, 범위는 0 ~ 255또한 0% ~ 100%.
blue	빨간색 값을 정의하려면, 범위는 0 ~ 255또한 0% ~ 100%.
alpha - 불투명도	불투명도를 0（완전 투명）에서 정의 ~ 1（완전 불투명）

CSS 함수

CSS @charset 규칙 CSS 함수(Function)