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 속성은 요소의 배경 색을 지정합니다.

시도해 보기

background-color: brown;

background-color: #74992e;

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

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

background-color: hsl(50, 33%, 25%);

background-color: hsla(50, 33%, 25%, 0.75);

<section id="default-example">
  <div class="transition-all" id="example-element"></div>
</section>

#example-element {
  min-width: 100%;
  min-height: 100%;
  padding: 10%;
}

구문

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

브라우저 호환성

더 보기