La propiedad background-color en CSS aplica colores sólidos como fondo en un elemento. He aquí un ejemplo:
html ( background-color: #82a43a; )El ejemplo usado arriba ( #82a43a) se llama código hexadecimal, y es una de las varias formas en que CSS tiene que representar un solo color. Hay varias formas de encontrar los códigos hexadecimales correctos. Cualquiera que haya utilizado una herramienta de diseño ha visto un selector de color similar a este:
Los códigos hexadecimales son una forma de declarar un color en CSS. También hay un montón de nombres que puede usar, por ejemplo:
.page-wrap ( background: white; ) footer ( background: black; ) .almonds ( background: blanchedAlmond; )Estos colores no son muy flexibles, pero pueden ser útiles en caso de apuro. Son más fáciles de recordar que los códigos hexadecimales, y hay muchos.
Otra forma de declarar un color es usar RGB, RGBa, HSL o HSLa:
#page-wrap ( background: rgba(0, 0, 0, 0.8); /* 80% Black */ ) .widget ( background: hsla(170, 50%, 45%, 1); )A diferencia de los códigos hexadecimales, estos valores permiten la transparencia (alfa), que puede ser muy útil. Obtenga más información sobre RGBa o HSLa.
Manifestación
Vea el color de fondo de la pluma de CSS-Tricks (@ css-tricks) en CodePen.
Relacionado
- adjunto de fondo
- clip de fondo
- imagen de fondo
- origen de fondo
- posición de fondo
- repetición de fondo
- tamaño de fondo
Más recursos
- Especificación CSS3
- MDN
Soporte del navegador
Los códigos hexadecimales y la mayoría de los nombres de colores funcionan en todas partes. RGBa y HSLa tienen sus propios conjuntos de compatibilidad con navegadores: RGBa y HSLa.
| Cromo | Safari | Firefox | Ópera | ES DECIR | Androide | iOS |
|---|---|---|---|---|---|---|
| Trabajos | Trabajos | Trabajos | Trabajos | Trabajos | Trabajos | Trabajos |