
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
: labackground-clip
,background-image
,background-origin
,background-position
,background-repeat
,background-size
ybackground-attachment
. - Página de propiedades
color
para establecer el color del elemento. - valores de color
<color>
. - Márgenes
margin
y notas al piepadding
.
- Introducción al Lenguaje de Programación CSS
- Características text-decoration-style en CSS
- Características text-decoration-line en CSS
- Características text-decoration-color en CSS
- Características text-decoration en CSS
- Características text-align-last en CSS
- Características text-align en CSS
- Características tab-size en CSS
- Características overflow-wrap en CSS
- Características line-break en CSS
- Características letter-spacing en CSS
- Características direction en CSS
- Características line-height en CSS
- Características font-style en CSS
- Características font-weight en CSS
- Características font-stretch en CSS
- Características font en CSS
- Características font-size-adjust en CSS
- Características font-size en CSS
- Características font-kerning en CSS
- Características font-family en CSS
- Características order en CSS
- Características justify-content en CSS
- Características flex-wrap en CSS
- Características flex-shrink en CSS
- Características flex-grow en CSS
- Características flex-flow en CSS
- Características flex-direction en CSS
- Características flex-basis en CSS
- Características flex en CSS
- Características align-self en CSS
- Características align-items en CSS
- Características align-content en CSS
- Características overflow-y en CSS
- Características overflow-x en CSS
- Características overflow en CSS
- Características padding-right en CSS
- Características padding-left en CSS
- Características padding-bottom en CSS
- Características margin-top en CSS
- Características padding-top en CSS
- Características margin-right en CSS