현재 번역은 완벽하지 않습니다. 한국어로 문서 번역에 동참해주세요.
요약
background-color CSS 속성은 엘리먼트의 배경색상을 지정한다. 색상 값이 또는 transparent 키워드를 지정할 수 있다.
| 초기값 | transparent |
|---|---|
| 적용대상 | all elements. It also applies to ::first-letter and ::first-line. |
| 상속 | no |
| Media | visual |
| Computed value | If the value is translucent, the computed value will be the rgba() corresponding one. If it isn't, it will be the rgb() corresponding one. The transparent keyword maps to rgba(0,0,0,0). |
| Animatable | yes, as a color |
| Canonical order | the unique non-ambiguous order defined by the formal grammar |
문법
background-color: color | inherit
값
- color
- 엘리먼트의 배경색상으로 사용할 CSS
<color>를 지정한다. 엘리먼트에 이미 하나 또는 여러개의 투명한background-image이 지정 되었다면 이 색상은 투명한 이미지 뒤에 렌더링된다.
예제
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;
}
Result
명세
| 명세 | 상태 | 주석 |
|---|---|---|
| CSS Backgrounds and Borders Module Level 3 The definition of 'background-color' in that specification. |
Candidate Recommendation | Though technically removing the transparent keyword, this doesn't change anything as it has been incorporated as a true <color> |
| CSS Level 2 (Revision 1) The definition of 'background-color' in that specification. |
Recommendation | No change. |
| CSS Level 1 The definition of 'background-color' in that specification. |
Recommendation |
브라우저 호환성
| Feature | Firefox (Gecko) | Chrome | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| Basic support | 1.0 (1.7 or earlier) | 1.0 | 4.0 | 3.5 | 1.0 (85) |
| Feature | Firefox Mobile (Gecko) | Android | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | 1.0 (1.9.2) | (Yes) | (Yes) | (Yes) | (Yes) |