Como el nombre en sí afirma el color de fondo la propiedad determina el color de fondo de cualquier elemento. Se puede usar para cambiar el color de fondo de un solo elemento, múltiples elementos, página completa o documento completo.

En CSS se pueden asignar varios valores al color de fondo propiedad como se enumera a continuación:

• Un nombre de color yo.mi. rojo, amarillo, verde, etc.,
• Los valores de color hexadecimal i.mi. #FF0000, 00FF00, etc.
• El valor RGB como RGB (255, 0, 0), etc.
• Los valores de HSL tales como (55, 45, 55), etc.

Esta redacción presentará una descripción general de la propiedad del color de fondo. Discutirá cómo asignar diferentes valores a la propiedad del color de fondo.

Cómo configurar el color de fondo usando nombres de color

En CSS podemos establecer el color de fondo utilizando nombres de color como rojo, verde, azul, etc.

Ejemplo 1: El ejemplo dado a continuación establecerá el color de fondo para toda la página utilizando "Valor de nombre de color":

Bienvenido a Linuxhint.comunicarse

Párrafo de muestra

El fragmento anterior especifica el color de fondo utilizando CSS interno. Mostrará la siguiente salida:

Cómo establecer el color de fondo utilizando el código de color hexadecimal

En CSS, el color de fondo se puede asignar utilizando valores de color hexadecimal. El valor de color hexadecimal consiste en un "#" Símbolo seguido de un código de tres o seis dígitos.

Ejemplo 2: El fragmento dado a continuación utiliza el código de color hexadecimal para diseñar el color de fondo de las etiquetas de párrafo utilizando estilo interno y color de fondo de

Uso de CSS en línea:

color de fondo usando código de color hexadecimal

Bienvenido a Linuxhint.comunicarse

Bienvenido a Linuxhint.comunicarse

Como resultado, produce la siguiente salida:

Cómo configurar el color de fondo usando el código de color RGB

Se pueden usar códigos de color RGB para establecer el color de fondo de un elemento. El código de color RGB determina que el color usando valores numéricos varía de 0 a 255. El color RGB utiliza tres colores principales i.mi. (rojo, verde y azul) para generar diferentes combinaciones de colores.

Ejemplo 3: El siguiente ejemplo creará un archivo CSS externo para establecer el color de fondo de varios elementos. Utiliza los códigos de color RGB para aplicar el color de fondo.

Archivo CSS:

cuerpo
Color de fondo: RGB (212, 212, 212);

H1
Color de fondo: RGB (0, 144, 158);

pags
Color de fondo: RGB (137, 210, 236);

Archivo HTML:

Color de fondo utilizando el código de color RGB

Bienvenido a Linuxhint.comunicarse

Bienvenido a Linuxhint.comunicarse

Bienvenido a Linuxhint.comunicarse

El código anterior generará el siguiente resultado:

Cómo configurar el color de fondo usando el código de color RGBA

Se puede agregar un parámetro adicional alfa (a) al código de color RGB que determina la opacidad de un color. El valor del parámetro alfa se encuentra entre 0.0 a 1.0.

Ejemplo 4: El siguiente código dado extendió el ejemplo anterior un poco y agregó el valor para el parámetro alfa también:

Archivo CSS:

cuerpo
Color de fondo: RGBA (212, 212, 212, 0.1);

H1
Color de fondo: RGBA (0, 144, 158, 0.1);

pags
Color de fondo: RGBA (137, 210, 236, 0.1);

Archivo HTML:

Color de fondo utilizando el código de color RGB

Bienvenido a Linuxhint.comunicarse

Bienvenido a Linuxhint.comunicarse

Bienvenido a Linuxhint.comunicarse

El único cambio en el ejemplo anterior (RGB) y este (RGBA) es el parámetro alfa. Compare las dos salidas, notará una clara diferencia:

Así funcionó el parámetro alfa.

Cómo configurar el color de fondo utilizando el código de color HSL

CSS admite otra convención de color llamada HSL. HSL establece un color con respecto al tono, la saturación y la ligereza.

Ejemplo 5: Considere el siguiente código que especifica cómo funciona la convención HSL:

Color de fondo utilizando el código de color HSL

Bienvenido a Linuxhint.comunicarse

Bienvenido a Linuxhint.comunicarse

El código anterior implementó el color de fondo en

y

elemento usando la convención de color HSL. Mostrará la siguiente salida:

Cómo configurar el color de fondo utilizando el código de color HSLA

El parámetro alfa se puede utilizar con la convención de color HSL para especificar la opacidad de un color.

Ejemplo 6: Extendamos un poco más el código anterior y agregemos el parámetro alfa en el HSL:

Color de fondo utilizando el código de color HSLA

Bienvenido a Linuxhint.comunicarse

Bienvenido a Linuxhint.comunicarse

La salida demostrará que el parámetro alfa agregó la opacidad al color de fondo como se muestra a continuación:

Conclusión

CSS utilizó una propiedad de fondo para implementar el color de fondo en un elemento, página, etc. El color de fondo se puede asignar utilizando múltiples formas como especificando el nombre del color, el valor hexadecimal, el valor RGB, etc.

Este artículo consideró las convenciones de color múltiples para la propiedad de color de fondo. Proporciona una guía detallada sobre cómo aplicar el color de fondo usando "nombre de color", "valores hexadecimales", "RGB, códigos de color RGBA" y "HSL, HSLA Color Codes".