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 (en-US) and ::first-line (en-US). |
상속 | no |
Computed value | computed color |
Animation type | a color |
형식 구문
<color>where
<color> = <rgb()> | (en-US) <rgba()> | (en-US) <hsl()> | (en-US) <hsla()> | (en-US) <hwb()> | (en-US) <hex-color> | (en-US) <named-color> | (en-US) currentcolor | (en-US) <deprecated-system-color>
where
<rgb()> = rgb( <percentage>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgb( <number>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgb( <percentage># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) ) | (en-US) rgb( <number># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) )
<rgba()> = rgba( <percentage>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgba( <number>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgba( <percentage># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) ) | (en-US) rgba( <number># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) )
<hsl()> = hsl( <hue> <percentage> <percentage> [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) hsl( <hue>, <percentage>, <percentage>, <alpha-value>? (en-US) )
<hsla()> = hsla( <hue> <percentage> <percentage> [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) hsla( <hue>, <percentage>, <percentage>, <alpha-value>? (en-US) )
<hwb()> = hwb( [ (en-US)<hue> | (en-US) none] (en-US) [ (en-US)<percentage> | (en-US) none] (en-US) [ (en-US)<percentage> | (en-US) none] (en-US) [ (en-US) / [ (en-US)<alpha-value> | (en-US) none] (en-US) ] (en-US)? (en-US) )where
<alpha-value> = <number> | (en-US) <percentage>
<hue> = <number> | (en-US) <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