background-color

background-color

background-color 속성은 백그라운드 색을 설정합니다.
기본 값은 투명하게 설정되어 있으며, 색상 표현 방식에 따라 키워드, 헥사코드, RGB, HSL 등으로 표현 할 수 있습니다.

---

background-color

background-color 속성은 백그라운드 색을 설정합니다.

특징	설명
기본 값	background-color : transparent
적용	background
버전	CSS1
사용성	★★★★★

정의(Definition)

• background-color 속성은 백그라운드 색을 설정합니다.

백그라운드와 관련된 속성(Background Related Properties)

• background 속성은 백그라운드 속성을 일괄적으로 설정합니다.
• background-attachment 속성은 배경 이미지의 고정 여부를 설정합니다.
• background-blend-mode 속성은 배경을 혼합했을 때의 상태를 설정합니다.
• background-clip 속성은 백그라운드 이미지의 위치 기준점을 설정합니다.
• background-color 속성은 백그라운드 색을 설정합니다.
• background-image 속성은 백그라운드 이미지 및 배경 속성을 설정합니다.
• background-origin 속성은 백그라운드 이미지의 위치 기준점을 설정합니다.
• background-position 속성은 백그라운드 이미지의 위치 영역을 설정합니다.
• background-repeat 속성은 백그라운드 이미지 반복 여부를 설정합니다.
• background-size 속성은 백그라운드 이미지 사이즈를 설정합니다.

문법(Syntax)

background-color : color | transparent

/* 키워드 속성 */
background-color : transparent;
background-color : currentcolor;

/* 키워드 컬러 속성 */
background-color : red;
background-color : black;

/* 헥사 코드 속성 */
background-color : #fce4ec;
background-color : #fff;

/* RGB 컬러 속성 */
background-color : rgb(255, 255, 0);
background-color : rgba(255, 255, 0, 0.4);

/* HSL 컬러 속성 */
background-color : hsl(40, 20%, 25%);
background-color : hsla(40, 20%, 25%, 0.4);

속성(Property)

속성값	설명
color	background-color를 설정합니다.
transparent	background-color를 투명하게 설정합니다.

예제1(Sample)

백그라운드 색상을 설정하는 예제입니다.

background-color : #fce4ec background-color : red background-color : rgb(244, 143, 177) background-color : rgba(244, 143, 177, 0.6) background-color : hsl(340, 83%, 66%) background-color : hsla(340, 83%, 66%, 0.4)

HTML

CSS

SCRIPT

<div class="background-box">
</div>

.background-box {
    background-color: #A2CBFA;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    height: 400px;
}

//Javascript none

호환성(Compatibility)

						6	7	8	9	10	11
background-color	○	○	○	○	○	○	○	○	○	○	○	○	○	○
color	○	○	○	○	○	○	○	○	○	○	○	○	○	○
transparent	○	○	○	○	○	○	○	○	○	○	○	○	○	○

참고 사이트(Reference)

• MDN
• W3C

---