RGBA를 이용한 투명도

Coddy HTML 여정의 Styling with CSS 섹션에 포함된 레슨 — 76개 중 28번째.

CSS에서 RGBA 색상은 색상의 불투명도를 지정하기 위한 알파 채널을 포함하는 RGB 색상의 확장입니다. RGBA는 Red, Green, Blue, Alpha를 의미합니다. 알파 매개변수는 0.0(완전 투명)에서 1.0(완전 불투명) 사이의 숫자이며, 다양한 투명도를 가진 색상을 만들 수 있게 해줍니다.

CSS에서 RGBA 색상을 사용하기 위한 기본 구문은 다음과 같습니다:

selector {
    color: rgba(red, green, blue, alpha);
    background-color: rgba(red, green, blue, alpha);
}

예를 들어:

p {
    color: rgba(255, 0, 0, 0.5); /* 반투명한 빨간색 */
    background-color: rgba(0, 255, 0, 0.3); /* 반투명한 초록색 */
}

h1 {
    color: rgba(0, 0, 255, 0.7); /* 반투명한 파란색 */
}

.overlay {
    background-color: rgba(0, 0, 0, 0.5); /* 반투명한 검은색 오버레이 */
}

챌린지

쉬움

<h3> 제목과 <p> 단락이 포함된 HTML 문서가 주어집니다. 여러분의 작업은 투명도를 적용하여 이 요소들의 스타일을 지정하기 위해 rgba() 함수와 함께 background-color 속성을 사용하는 것입니다. 아래 단계를 따르세요:

<h3> 요소를 대상으로 하는 CSS 규칙을 작성하세요. rgba(0, 0, 255, 0.5) (50% 투명도)를 사용하여 배경색을 파란색으로 설정하세요.
<p> 요소를 대상으로 하는 CSS 규칙을 작성하세요. rgba(0, 128, 0, 0.3) (30% 투명도)를 사용하여 배경색을 초록색으로 설정하세요.

치트 시트

RGBA 색상은 불투명도를 위한 알파 채널을 추가하여 RGB 색상을 확장합니다. 알파 매개변수의 범위는 0.0(완전 투명)에서 1.0(완전 불투명)까지입니다.

기본 구문:

selector {
    color: rgba(red, green, blue, alpha);
    background-color: rgba(red, green, blue, alpha);
}

예제:

p {
    color: rgba(255, 0, 0, 0.5); /* 반투명 빨간색 */
    background-color: rgba(0, 255, 0, 0.3); /* 반투명 초록색 */
}

.overlay {
    background-color: rgba(0, 0, 0, 0.5); /* 반투명 검은색 오버레이 */
}

직접 해보기

<html>
<head>
    <title>Transparency with RGBA</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h3>Did You Know?</h3>
    <p>The first computer programmer was Ada Lovelace in the 1800s!</p>
</body>
</html>