background-color

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.

브라우저 호환성

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`background-color`	Chrome Full support 1	Edge Full support 12	Firefox Full support 1	IE Full support 4 Notes Full support 4 Notes Notes In Internet Explorer 8 and 9, there is a bug where a computed `background-color` of `transparent` causes `click` events to not get fired on overlaid elements.	Opera Full support 3.5	Safari Full support 1	WebView Android Full support ≤37	Chrome Android Full support 18	Firefox Android Full support 4	Opera Android Full support 14	Safari iOS Full support 1	Samsung Internet Android Full support 1.0

Legend

Full support: Full support
See implementation notes.: See implementation notes.

구문

값