Fondo de CSS
- Página anterior Colores HSL de CSS
- Página siguiente Imagen de fondo de CSS
Los atributos de fondo CSS se utilizan para definir los efectos de fondo de un elemento.
En estos capítulos, aprenderá los siguientes atributos de fondo CSS:
- color_fondo
- imagen_fondo
- repetir_fondo
- fijo_fondo
- ubicación_fondo
CSS color_fondo
color_fondo La propiedad especifica el color de fondo del elemento.
Ejemplo
El color de fondo de la página se establece como sigue:
body {
color_fondo: celeste;
}
A través de CSS, los colores se especifican generalmente de la siguiente manera:
- Nombres de colores válidos - por ejemplo "rojo"
- Valores en hexadecimal - por ejemplo "#ff0000"
- Valores RGB - por ejemplo "rgb(255,0,0)"
Consulte Valores de color CSS，obtenga una lista completa de posibles valores de color.
Otros elementos
Puede establecer un color de fondo para cualquier elemento HTML:
Ejemplo
Aquí, los elementos <h1>, <p> y <div> tendrán diferentes colores de fondo:
h1 {
color_fondo: verde;
}
div {
color_fondo: celeste;
}
p {
color_fondo: amarillo;
}
Opacidad / Transparente
La propiedad de opacidad especifica la opacidad/transparente de un elemento. El rango de valores es de 0.0 a 1.0. Cuanto menor sea el valor, más transparente será:
Ejemplo
div {
color_fondo: verde;
opacidad: 0.3;
}
Nota:Utilice opacidad Cuando se aplica la propiedad de opacidad a un elemento de fondo, todos sus elementos secundarios heredan la misma opacidad. Esto puede dificultar la lectura del texto en elementos completamente transparentes.
Transparencia de RGBA
Si no desea aplicar opacidad a los elementos secundarios, por ejemplo en el ejemplo anterior, utilice RGBA Valor de color. A continuación, se muestra un ejemplo en el que se establece el color de fondo en lugar de la opacidad del texto:
Puede obtener más información de nuestra Colores de CSS En este capítulo aprendimos a usar RGB como valor de color. Además de RGB, también se pueden usar valores de color RGB con alpha Se utilizan juntos los canales (RGBA) - Este canal especifica la opacidad del color.
El valor de color RGBA se especifica como: rgba(red, green, blue, alpha)。alpha Los parámetros son números entre 0.0 (completamente transparente) y 1.0 (completamente opaco).
Consejo:Puede encontrar más información sobre los colores RGBA en nuestra Colores de CSS En este capítulo aprendimos más sobre los colores RGBA.
Ejemplo
div {
background: rgba(0, 128, 0, 0.3) /* Fondo verde de 30% de opacidad */
}
- Página anterior Colores HSL de CSS
- Página siguiente Imagen de fondo de CSS
