Properties

Properties

Editing
  • account_tree
  • bug_report

background-color

선택자를 갖는 요소에 배경색을 적용한다.

사용 가능한 값 타입

〈color〉

sRGB 색상 공간의 색상값이다. 알파 채널 투명도 값을 포함 할 수 있으며, 색상이 배경과 합성되는 방법을 나타낸다.

사용되는 키워드

  • currentColor

    동일한 속성이 아니어도 상속받은 색상값을 나타낸다.

  • transparent

    완전한 투명을 나타낸다.

    rgba(0, 0, 0, 0)의 별칭으로 사용되는 값으로 볼 수 있다. CSS Level 2 전까지는 지금처럼 실제 색상 값으로 사용하는 게 아니었다. backgroundborder 속성에서 색상을 설정할 때 사용되는 키워드였지만 CSS Colors Level 3에서 알파채널이 추가되면서 투명을 의미하는 색상 값이 되었고 색상을 정의하는 모든 속성에서 사용이 가능하게 되었다.

  •  

    aliceblue

  •  

    antiquewhite

  •  

    aqua

  •  

    aquamarine

  •  

    azure

  •  

    beige

  •  

    bisque

  •  

    black

  •  

    blanchedalmond

  •  

    blue

  •  

    blueviolet

  •  

    brown

  •  

    burlywood

  •  

    cadetblue

  •  

    chartreuse

  •  

    chocolate

  •  

    coral

  •  

    cornflowerblue

  •  

    cornsilk

  •  

    cyan

  •  

    darkblue

  •  

    darkcyan

  •  

    darkgoldenrod

  •  

    darkgray

  •  

    darkgreen

  •  

    darkkhaki

  •  

    darkmagenta

  •  

    darkolivegreen

  •  

    darkorange

  •  

    darkorchid

  •  

    darkred

  •  

    darksalmon

  •  

    darkseagreen

  •  

    darkslateblue

  •  

    darkslategray

  •  

    darkturquoise

  •  

    darkviolet

  •  

    deeppink

  •  

    deepskyblue

  •  

    dimgray

  •  

    dodgerblue

  •  

    firebrick

  •  

    floralwhite

  •  

    forestgreen

  •  

    fuchsia

  •  

    gainsboro

  •  

    ghostwhite

  •  

    gold

  •  

    goldenrod

  •  

    gray

  •  

    green

  •  

    greenyellow

  •  

    honeydew

  •  

    hotpink

  •  

    indianred

  •  

    indigo

  •  

    ivory

  •  

    khaki

  •  

    lavender

  •  

    lavenderblush

  •  

    lawngreen

  •  

    lemonchiffon

  •  

    lightblue

  •  

    lightcoral

  •  

    lightcyan

  •  

    lightgoldenrodyellow

  •  

    lightgray

  •  

    lightgreen

  •  

    lightpink

  •  

    lightsalmon

  •  

    lightseagreen

  •  

    lightskyblue

  •  

    lightslategray

  •  

    lightsteelblue

  •  

    lightyellow

  •  

    lime

  •  

    limegreen

  •  

    linen

  •  

    magenta

  •  

    maroon

  •  

    mediumaquamarine

  •  

    mediumblue

  •  

    mediumorchid

  •  

    mediumpurple

  •  

    mediumseagreen

  •  

    mediumslateblue

  •  

    mediumspringgreen

  •  

    mediumturquoise

  •  

    mediumvioletred

  •  

    midnightblue

  •  

    mintcream

  •  

    mistyrose

  •  

    moccasin

  •  

    navajowhite

  •  

    navy

  •  

    oldlace

  •  

    olive

  •  

    olivedrab

  •  

    orange

  •  

    orangered

  •  

    orchid

  •  

    palegoldenrod

  •  

    palegreen

  •  

    paleturquoise

  •  

    palevioletred

  •  

    papayawhip

  •  

    peachpuff

  •  

    peru

  •  

    pink

  •  

    plum

  •  

    powderblue

  •  

    purple

  •  

    rebeccapurple

  •  

    red

  •  

    rosybrown

  •  

    royalblue

  •  

    saddlebrown

  •  

    salmon

  •  

    sandybrown

  •  

    seagreen

  •  

    seashell

  •  

    sienna

  •  

    silver

  •  

    skyblue

  •  

    slateblue

  •  

    slategray

  •  

    snow

  •  

    springgreen

  •  

    steelblue

  •  

    tan

  •  

    teal

  •  

    thistle

  •  

    tomato

  •  

    turquoise

  •  

    violet

  •  

    wheat

  •  

    white

  •  

    whitesmoke

  •  

    yellow

  •  

    yellowgreen

관련 함수들

  • hsl()

    색상(Hue), 채도(Saturation), 명도(Lightness) 매개 변수 값으로 색상을 생성한다.

  • hsla()

    색상(Hue), 채도(Saturation), 명도(Lightness), 투명도(Alpha) 매개 변수 값으로 색상을 생성한다.

  • rgb()

    RGB 방식으로 색상을 설정한다.

  • rgba()

    기본적으로 rgb() 함수와 동일하나 투명도를 지정할 수 있다.

동일한 타입을 사용하는 관련 속성

다음은 필요에 따라 일부 값을 설명하므로 표시되지 않는 값은 값 유형을 참조하라.

  • 〈color〉transparentCSS1

    기본값으로 배경을 투명하게 처리한다.

구문

  • background-color 〈color〉;CSS1

    16진수 컬러코드, 색상 명, RGB, HSL 값으로 배경 색으로 적용할 수 있으며 투명을 적용할 수도 있다. RGB의 경우 rgb() 함수를 이용하며 투명도를 적용하고자 하는 경우에는 rgba() 함수를 사용한다. 색조, 채도, 명도를 이용한 방식으로 색상을 지정하고자 하는 경우에는 hsl() 함수를 이용하며 투명도를 적용하고자 하는 경우에는 hsla() 함수를 사용한다.

  • background-color #FFFF00;CSS1
    요소의 배경색을 노랑색으로 설정한다.
  • object.style.backgroundColor="#FFFF00";CSS1

    자바스크립트 형식으로 요소의 배경색을 노란색으로 설정한다.

기술 문서

일반적으로 16진수 색상 코드(Hexadecimal), rgb 함수, 투명도를 적용할 수 있는 rgba 함수를 사용하여 배경색을 적용한다. 컬러 명도 사용할 수 있지만 일반적으로 사용되지 않는다.

body {
  background-color: #EAEAEA;
}
p {
  background-color: rgb(255,0,255);
}
h1 {
  background-color: green;
}

 

지원 웹브라우저