background-color

A propriedade CSS background-color define a cor de fundo de um elemento, usando tanto um valor  <color> ou a palavra-chave transparent.

/* Valores de palavra-chave */
background-color: red;

/* Valores hexadecimais */
background-color: #bbff00;

/* Valor hexadecimal com um canal  alpha */
background-color: #11ffee00; /* 00 - totalmente transparente */
background-color: #11ffeeff; /* ff - totalmente opaco */

/* Valores RGB */
background-color: rgb(255, 255, 128);

/* Valores RGBA ou RGB com canal alpha */
background-color: rgba(117, 190, 218, 0.0); /* 0.0 - totalmente transparente */
background-color: rgba(117, 190, 218, 0.5); /* 0.5 - semi-transparente */
background-color: rgba(117, 190, 218, 1.0); /* 1.0 - totalmente opaco */

/* Valor HSLA */
background-color: hsla(50, 33%, 25%, 0.75);

/* Valores de palavra-chave Especiais */
background-color: currentcolor;
background-color: transparent;

/* Valores Globais */
background-color: inherit;
background-color: initial;
background-color: unset;

<div id="container">
  <div class="subcontainer">
    <div id="keyword" class="color"></div>
    <div class="caption">skyblue</div>
  </div>
  <div class="subcontainer">
    <div id="hex" class="color"></div>
    <div class="caption">#bbff00;</div>
  </div>
  <div class="subcontainer">
    <div id="rgb" class="color"></div>
    <div class="caption">rgb(240, 220, 180)</div>
  </div>
  <div class="subcontainer">
    <div id="rgba" class="color"></div>
    <div class="caption">rgba(240, 220, 180, 0.5)</div>
  </div>
  <div class="subcontainer">
    <div id="hsl" class="color"></div>
    <div class="caption">hsl(50, 60%, 75%)</div>
  </div>
  <div class="subcontainer">
    <div id="currentcolor" class="color"></div>
    <div class="caption">currentcolor</div>
  </div>
  <div class="subcontainer">
    <div id="transparent" class="color"></div>
    <div class="caption">transparent</div>
  </div>
</div>

#container {
  width: 100%;
  background-color: #F4F7F8;
  display: flex;
  flex-wrap: wrap;
}

.subcontainer {
  border: 1px solid black;
  height: 80px;
  margin: 10px;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  background-color: #dcdcdc;
  background-image:
      linear-gradient(45deg, rgb(0, 0, 0, 0.1) 25%, transparent 25%),
      linear-gradient(225deg, rgb(0, 0, 0, 0.1) 25%, transparent 25%),
      linear-gradient(225deg, rgb(0, 0, 0, 0.1) 25%, transparent 25%),
      linear-gradient(45deg, rgb(0, 0, 0, 0.1) 25%, transparent 25%);
  background-size: 20px 20px;
  background-position: 0 0, -10px -10px;
}

.color {
  width: 100%;
  flex: 1 0 auto;
}

.caption {
  background-color: white;
  padding: 10px;
  text-align: center;
  white-space: nowrap;
  color: black;
  font-family: monospace;
  font-weight: bold;
}

#keyword {
  background-color: skyblue;
}

#hex {
  background-color: #bbff00;
}

#rgb {
  background-color: rgb(240, 220, 180);
}

#rgba {
  background-color: rgb(240, 220, 180, 0.5);
}

#hsl {
  background-color: hsl(50, 60%, 75%);
}

#currentcolor {
  background-color: currentcolor;
}

#transparent {
  background-color: transparent;
}

Sintaxe

A propriedade background-color é especificada como um único valor de <color> .

Valores

<color>

É uma cor CSS <color> que descreve a cor uniforme do plano de fundo. Mesmo se um ou vários background-image são definidos, essa cor pode afetar a renderização, por trânsparência se as imagens não forem opacas. No CSS, transparent é uma cor.

Sintaxe Formal

<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>

Exemplos

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;
}

Resultado

Especificações

Browser compatibility

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

See also

• Multiple backgrounds
• The <color> data type
• Other color-related properties: color, border-color, outline-color, text-decoration-color, text-emphasis-color, text-shadow, caret-color, and column-rule-color
• Applying color to HTML elements using CSS