background-color 속성의 이해

background-color 속성은 요소의 배경색을 지정합니다.
background-image가 설정되어 있을 경우, 그 뒤에 배경색이 렌더링됩니다.

다양한 방법으로 색상 값을 지정할 수 있으며, 투명도(알파 채널)가 있는 색상 값도 사용할 수 있습니다.

CSS 데모: background-color 데모 버튼을 클릭해 보세요!

background-color 속성의 형식은 다음과 같습니다.

구문

CSS background-color 속성 값 예시 
/* 키워드 값 */
background-color: currentcolor; /* 현재 요소의 글자색 */

/* 컬러 이름 값 */
background-color: green;
background-color: orange;
background-color: darkslateblue;
background-color: transparent;

/* 16진수(hex) 값 */
background-color: #f00; /* 빨강 */
background-color: #ff6347; /* 토마토색 */
background-color: #ff6347aa; /* 토마토색, 반투명 */

/* rgb() 값 */
background-color: rgb(255, 99, 71, 0.8); /* 토마토 */
background-color: rgba(255, 99, 71, 0.8); /* 토마토, 투명도 */
background-color: rgb(255 99 71 / 0.5); /* 토마토, 50% 투명도 */
background-color: rgba(255 99 71 / 0.3); /* 토마토, 30% 투명도 */
background-color: rgb(255 99 71 / 60%); /* 토마토, 60% 투명도 */
background-color: rgba(255.6 99 71 / 40%); /* 토마토, 40% 투명도 */

/* hsl() 값 */
background-color: hsl(120, 100%, 25%, 0.5); /* 녹색 */
background-color: hsla(120, 100%, 25%, 0.5); /* 녹색, 투명도 */
background-color: hsl(120 100% 25% / 0.5); /* 녹색, 투명도 */
background-color: hsla(120 100% 25% / 50%); /* 녹색, 50% 투명도 */
background-color: hsl(120 100% 25% / 70%); /* 녹색, 70% 투명도 */
background-color: hsla(120.2 100% 25% / 80%); /* 녹색, 80% 투명도 */

/* 글로벌 값 */
background-color: inherit;
background-color: initial;
background-color: unset;

값

color 속성 값
<color> 색상 값

background-color 속성은 단일 <color>(색상) 값을 사용해 지정합니다.
여러 색상으로 구성된 그라디언트(예: linear-gradient(#f69d3c, #3f87a6))를 사용할 수 없다는 의미입니다. 요소의 배경으로 그라디언트를 사용하려면 background-image 속성을 사용하세요.

CSS 
/* 그라디언트 값은 사용할 수 없습니다. */
background-color: linear-gradient(#f69d3c, #3f87a6);

형식 구문

CSS 
selector {
    background-color: /* value */
}

형식 정의

background-color 속성의 형식 정의
초깃값 transparent(투명색)
적용 요소 모든 요소
상속 아니오
애니메이션 예

초깃값 - transparent

background-color 속성의 초깃값은 transparent(투명색)입니다.
다만, 기본적으로 브라우저 스타일 시트에서 컨트롤 요소들(예: <input>으로 나타내는 텍스트 박스와 버튼, <textarea>, <select>, <button> 등)에서는 기본적으로 흰색이 사용됩니다.

background-color 속성의 렌더링 세부 사항

background-color 속성은 요소의 배경색을 지정하는 기본 속성이지만, 다양한 다른 CSS 속성이나 요소와 결합될 때 예상치 못한 방식으로 렌더링될 수 있습니다.

border, background-image, background-clip 속성과의 관계를 중심으로 background-color의 렌더링 방식을 설명합니다.

border와 background-color 렌더링 순서

background-color는 border 뒤쪽에 렌더링되므로, 테두리가 있는 요소의 경우 배경색이 border로 설정한 테두리 뒤에 표시됩니다.

예제
CSS 
div {
    border: 10px dashed orangered;
    background-color: yellowgreen;
    width: 100px;
    height: 100px;
}
실제 적용된 모습

background-image와 background-color 렌더링 순서

background-image 속성은 이미지 리소스뿐만 아니라 그라디언트도 설정할 수 있습니다.

background-image 속성이 설정된 경우, background-color는 그 뒤에 렌더링됩니다. 이 때문에 배경색은 이미지나 그라디언트가 일부 투명하거나 설정된 크기가 작을 때만 보일 수 있습니다.

예제: 이미지와 배경색 조합
CSS 
div {
    border: 10px dashed orangered;
    background-color: yellowgreen;
    background-image: url("heart.png");
    background-size: 50px;
    background-repeat: no-repeat;
    width: 100px;
    height: 100px;
}

이 예제에서는 이미지가 background-image로 설정되어 background-color가 이미지 뒤에 렌더링됩니다. 이미지가 반복되지 않으므로, 이미지가 없는 부분에서만 배경색이 보입니다.

실제 적용된 모습
예제: 그라디언트와 배경색 조합
CSS 
div {
    border: 10px dashed orangered;
    background-color: yellowgreen;
    background-image: linear-gradient(to right, rgba(0, 0, 255, 0.5), rgba(255, 255, 255, 0.5));
    width: 100px;
    height: 100px;
}

이 예제에서는 그라디언트의 투명도 덕분에 배경색이 그라디언트 아래에 희미하게 보입니다.

실제 적용된 모습

background-clip을 사용한 배경 영역 조정

background-clip 속성은 요소의 배경(색상이나 이미지)이 어느 부분까지 차지할 지를 설정합니다.
border-box, padding-box, content-box, text 중 하나를 선택하여 배경이 차지(클리핑(오려냄), clipping)할 영역으로 지정합니다.

데모 적용해 보기: background-clip 데모 버튼을 클릭해 보세요!

예제

HTML 
<p class="example-1">background-color 속성은 요소의 배경색을 지정합니다.</p>
<p class="example-2">background-color 속성은 요소의 배경색을 지정합니다.</p>
<p class="example-3">background-color 속성은 요소의 배경색을 지정합니다.</p>
<p class="example-4">background-color 속성은 요소의 배경색을 지정합니다.</p>
CSS 
.example-1 {
    background-color: coral;
    color: white;
}
.example-2 {
    background-color: rgb(153, 204, 255);
    color: rgb(255, 255, 255);
}
.example-3 {
    background-color: #666699;
    color: #ffffff;
}
.example-4 {
    background-color: hsl(300, 100%, 70%);
    color: hsl(0, 0%, 100%);
}

코드 부연설명
color 속성은 글자(폰트)의 색상, 즉 전경색을 지정합니다.

실제 적용된 모습

접근성 고려사항

텍스트와 배경 사이에 충분한 대비를 제공해야 합니다. 대개 텍스트가 배경과 충분히 구별되도록 대비 비율이 4.5:1 이상이어야 합니다. 이는 WCAG(웹 콘텐츠 접근성 지침)에서 권장하는 기준입니다.

WCAG(Web Content Accessibility Guidelines)

WCAG(Web Content Accessibility Guidelines, 웹 콘텐츠 접근성 가이드라인)는 웹 콘텐츠를 누구나 접근하고 사용할 수 있도록 하는 기술적인 지침입니다. 장애 유형이나 기술적 제약 없이 모든 사람이 웹 콘텐츠를 동등하게 이용할 수 있도록 보장하는 것이 목표입니다.

브라우저 호환성

background-color 속성의 브라우저 호환성
속성
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
background-color 1 12 1 1

명세서

background-color 속성의 명세서 사양
명세서 사양
background-color CSS Backgrounds and Borders Module Level 3
#background-color

참고문헌

같이 보기