background-color

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

CSS background-color 속성은 요소의 배경 색을 지정합니다.

시도해보기

구문

css
/* 키워드 값 */
background-color: red;
background-color: indigo;

/* 16진수 값 */
background-color: #bbff00; /* 완전 불투명 */
background-color: #bf0; /* 완전 불투명 단축 */
background-color: #11ffee00; /* 완전 투명 */
background-color: #1fe0; /* 완전 투명 단축 */
background-color: #11ffeeff; /* 완전 불투명 */
background-color: #1fef; /* 완전 불투명 단축 */

/* RGB 값 */
background-color: rgb(255, 255, 128); /* 완전 불투명 */
background-color: rgba(117, 190, 218, 0.5); /* 50% 불투명도 */

/* HSL 값 */
background-color: hsl(50, 33%, 25%); /* 완전 불투명 */
background-color: hsla(50, 33%, 25%, 0.75); /* 75% 불투명도 */

/* 특별 키워드 값 */
background-color: currentcolor;
background-color: transparent;

/* 전역 값 */
background-color: inherit;
background-color: initial;
background-color: unset;

background-color 속성은 하나의 <color> 값을 사용해 지정합니다.

color

요소의 배경으로 사용할 단일 색상입니다. background-image 뒤에 렌더링 되므로, 이미지가 투명한 부분을 가지고 있으면 그 곳을 통해 볼 수 있습니다.

접근성 고려사항

낮은 시력을 가진 사용자도 페이지의 콘텐츠를 읽을 수 있도록 글자 색과 배경색의 대비를 높게 유지하는 것이 중요합니다.

색상 대비율은 배경색과 투명도를 적용한 글자 색의 밝기를 비교해서 얻어낼 수 있습니다. 현재 웹 콘텐츠 접근성 가이드라인(WCAG)을 만족하려면, 텍스트 콘텐츠는 4.5:1, 제목 등 큰 텍스트는 3:1의 대비율이 필요합니다. 큰 텍스트란 18.66px 이상의 굵은 글씨 혹은 24px 이상의 텍스트로 정의하고 있습니다.

형식 정의

초기값transparent
적용대상all elements. It also applies to ::first-letter and ::first-line.
상속no
계산 값computed color
Animation typea color

형식 구문

background-color = 
<color>

예제

HTML

html
<div class="exampleone">Lorem ipsum dolor sit amet, consectetuer</div>

<div class="exampletwo">Lorem ipsum dolor sit amet, consectetuer</div>

<div class="examplethree">Lorem ipsum dolor sit amet, consectetuer</div>

CSS

css
.exampleone {
  background-color: teal;
  color: white;
}

.exampletwo {
  background-color: rgb(153, 102, 153);
  color: rgb(255, 255, 204);
}

.examplethree {
  background-color: #777799;
  color: #ffffff;
}

결과

명세서

Specification
CSS Backgrounds and Borders Module Level 3
# background-color

브라우저 호환성

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
background-color

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

더 보기