background-color - CSS: Cascading Style Sheets

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

구문

/* 키워드 값 */
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 value	computed color
Animation type	a color

형식 구문

<color>where 
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
where 
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )
where 
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

예제

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

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

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

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

결과

명세

명세	주석	피드백
CSS Backgrounds and Borders Module Level 3 The definition of 'background-color' in that specification.	Though technically removing the `transparent` keyword, this doesn't change anything as it has been incorporated as a true `<color>`	Backgrounds Level 3 GitHub issues
CSS Level 2 (Revision 1) The definition of 'background-color' in that specification.	No change.
CSS Level 1 The definition of 'background-color' in that specification.

브라우저 호환성

BCD tables only load in the browser