Característica background-color en CSS

La propiedad background-color CSS establece el color de fondo de un elemento y el color de fondo es un valor de color <color>.

Funciones background color en css

Valor inicial	`transparent`
Aplicado a	Todos los artículos.
Heredable	No
Móvil	Sí
Valor calculado	El valor calculado para el color.

/* palabras reservadas */ 
background-color: red;

/* valor hexadecimal */ 
background-color: #bbff00;

/* valores hexadecimales con transparencia */ 
background-color: #11ffee00;
background-color: #11ffeeff;

/* usa la función */ 
background-color: rgb ( 225 ,  225 ,  128 );

/* Soporta el uso de la función de transparencia */ 
background-color: rgba(117, 190, 218, 0.0);
background-color: rgba(117, 190, 218, 0.5);
background-color: rgba(117, 190, 218, 1.0); 

/* palabras reservadas con significado especial */ 
background-color: currentcolor;
background-color: transparent;

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

/* valores globales */ 
background-color: inherit;
background-color: initial;
background-color: unset;

Ejemplos y aplicaciones

Este ejemplo tiene cuatro elementos <div>, estableceremos el color de fondo y el color del texto en valores en diferentes formatos.

Código HTML:

< p  class = "example-1" > BigCode </ p > 
< p  class = "example-2" > BigCode </ p > 
< p  class = "example-3" > BigCode </ p > 
< p  class = "example-4" > BigCode </ p >

Código CSS:

p {
  padding: 10px;
  margin: 10px;
}
.example-1 {
  background-color: gray;
  color: white;
}
.example-2 {
  background-color: rgb(120, 102, 120);
  color: rgb(225, 225, 204);
}
.example-3 {
  background-color: hsla(18, 84%, 42%, 0.5);
  color: hsla(230, 15%, 100%, 0.7);
}
.example-4 {
  background-color: #205a23;
  color: #FFFFFF;
}

Soporte de navegadores

Característica	Chrome	Firefox	IE	Ópera	Safari
Soporte básico	1.0	1.0	4.0	3,5	1.0

Estructura general

La propiedad acepta un background-color valor de color <color>.

<color>

Este es el valor de color del fondo, y este valor puede afectar la forma en que se representa el elemento incluso si se especifica un valor (o valores) para la propiedad background-image.

Si configuramos una imagen de fondo pero esta imagen no es válida, se mostrará este valor de color en su lugar. Y si configuramos una imagen para el fondo y esta imagen tiene un área transparente, entonces aparecerá el valor de color que especificamos en esta propiedad.

Estructura formal

background-color: <color>;

Ver también

Propiedades de la página incautados por la propiedad de acceso directo background: la background-clip, background-image, background-origin, background-position, background-repeat, background-size y background-attachment.
Página de propiedades color para establecer el color del elemento.
valores de color <color>.
Márgenes margin y notas al pie padding.