Color de fondo - Trucos CSS

Tabla de contenido

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:

Tenga en cuenta el código hexadecimal en el medio inferior.

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.