Día 10: Color de fondo CSS
La ruta del desarrollador web frontend autónomo🤹♂️
La propiedad background CSS se utilizan para agregar efectos de fondo a los elementos.
En este capítulo, aprenderás sobre las siguientes propiedades background CSS:
background-colorbackground-imagebackground-repeatbackground-attachmentbackground-positionbackground(propiedad abreviada)
Color de fondo CSS
La propiedad background-color especifica el color de fondo de un elemento.
Ejemplo:
body {
background-color: lightblue;
}
Con CSS, un color se puede especificar mediante:
Un nombre de color válido como
redUn valor hexadecimal como
#ff0000
Otros elementos
Puedes establecer el color de fondo para cualquier elemento HTML:
Ejemplo:
Aquí, los elementos <h1>, <p> y <div> tendrán diferentes colores de fondo:
h1 {
background-color: green;
}
div {
background-color: lightblue;
}
p {
background-color: yellow;
}
Opacidad y transparencia
La propiedad opacity especifica la opacidad/transparencia de un elemento. Puede tomar un valor de 0.0 - 1.0. Cuanto menor sea el valor, más transparente:
Ejemplo:
div {
background-color: green;
opacity: 0.3;
}
Nota: cuando se usa la propiedad
opacitypara agregar transparencia al fondo de un elemento, todos sus elementos secundarios heredan la misma transparencia. Esto puede hacer que el texto dentro de un elemento completamente transparente sea difícil de leer.
Transparencia usando RGBA
Si no deseas aplicar opacidad a los elementos secundarios, como en el ejemplo anterior, use valores de color RGBA.
El siguiente ejemplo establece la opacidad para el color de fondo y no para el texto:
En nuestro capítulo Colores CSS aprendiste que puedes usar RGB como un valor de color. Además de RGB, puedes usar un valor de color RGB con un canal alpha(RGBA), que especifica la opacidad de un color.
Un valor de color RGBA se especifica con: rgba(red, green, blue, alpha). El parámetro alpha es un número entre 0,0 (totalmente transparente) y 1,0 (totalmente opaco).
Ejemplo:
div {
background: rgba(0, 128, 0, 0.3) /* Fondo verde con opacidad 30% */
}
Resumen
Este documento de W3Schools explica cómo agregar efectos de fondo a los elementos HTML con las propiedades CSS background. Se detalla la propiedad background-color, que especifica el color de fondo de un elemento, y se muestran ejemplos de cómo establecer diferentes colores de fondo para diferentes elementos. También se explica cómo agregar opacidad y transparencia al fondo de un elemento con la propiedad opacity o con valores de color RGBA.
Traducido con 💚 desde W3Schools.com