【CSS】RGB와 RGBA와 opacity

RGB

세 개의 숫자를 조합하여 표시 할 색상을 결정합니다.

【CSS】기초에서 색상 지정은

・16진수의 컬러 코드로 색을 지정(#ff0000,#008000등)
・주요색이면 직접 색명을 지정해도 표시된다(red,green등)

에서 2 종류의 칼라 지정 방법을 기입했습니다만, 이번은 RGB 라고 하는 것을 추가

색채의 공부를 한 적이 있는 사람은 이쪽이 더 친숙하다고 생각합니다.
RGB라는 것은 ...

R ... RED의 R
G ... GREEN의 G
B ... BLUE B

즉 빛의 삼원색이라고 불리는 것입니다

기입 방법은

セレクタ {
　プロパティ: rgb(赤, 緑, 青);
}

지금까지라면 값을 red 로 하거나 #ff0000 라고 기입하면 표시되었지만 RGB 로 기입할 때는 rgb 라고 기입하고 (빨강, 초록, 파랑) 의 색 부분은 숫자를 지정 합니다.

예를 들어 배경색을 빨간색으로 만들고 싶다면

예.css

background-color: rgb(255, 0, 0);

라는 식으로 기입합니다
배경색을 주황색으로 만들고 싶을 때 RGB로 표시하면

예.css

    background-color: rgb(243, 152, 29);

웹
↓


표시됨

RGBA

RGB로 지정된 색상을 투명하게 만듭니다.

방금 전 위에서 RGB는 빛의 삼원색이라고 말했지만
거기에 A 가 더해 투명도를 지정할 수 있습니다.
A는 ALPHA 값 A로 투명도를 지정합니다.

사용법은 간단합니다

セレクタ {
　プロパティ: rgba(赤, 緑, 青, 透明度);
}

아까 정도의 RGB의 끝에 투명도를 더하면 됩니다.
투명도 지정 방법은

1.0(불투명)~0(투명)

로 지정합니다.
그렇다면 빨간색 상자를 반투명 0.5로 만들어 보겠습니다

예.css

background-color: rgba(255, 0, 0, 0.5);

왼쪽이 불투명하고 오른쪽이 반투명합니다.
RGB에 투명도를 더하기만 하면 쉽게 투명화할 수 있습니다

RGBA와 opacity의 차이

같은 투명화라면 opacity 에서도 좋잖아 라고 생각합니다만 명확한 차이가 있습니다.

RGBA ··· 지정한 색만 투명화한다
opacity ··· 요소 전체를 투명화한다



왼쪽이 RGBA 로 투명화, 오른쪽이 opacity 로 투명화한 것입니다.
RGBA는 지정된 빨간색으로만 투명합니다.
opacity 는 적색뿐만 아니라 문자도 투명화되어 있는 것을 알 수 있을까 생각합니다.

그래서 이 부분만을 투명화하고 싶을 때는 RGBA
전체적으로 투명화하고 싶을 때는 opacity
와 구분하면 좋을까 생각합니다