Fondos CSS
Las propiedades de fondo de CSS se utilizan para agregar efectos de fondo a los elementos.
En estos capítulos, aprenderá acerca de las siguientes propiedades de fondo de CSS:
-
background-color -
background-image -
background-repeat -
background-attachment -
background-position -
background(propiedad abreviada)
color de fondo CSS
La background-colorpropiedad especifica el color de fondo de un elemento.
Ejemplo
El color de fondo de una página se establece así:
body {
background-color: lightblue;
}
Con CSS, un color suele especificarse mediante:
- un nombre de color válido, como "rojo"
- un valor HEX - como "#ff0000"
- un valor RGB - como "rgb(255,0,0)"
Mire Valores de color CSS para obtener una lista completa de posibles valores de color.
Otros elementos
Puede 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 / Transparencia
La opacitypropiedad especifica la opacidad/transparencia de un elemento. Puede tomar un valor de 0.0 - 1.0. Cuanto menor sea el valor, más transparente:
opacidad 1
opacidad 0.6
opacidad 0.3
opacidad 0.1
Ejemplo
div {
background-color: green;
opacity: 0.3;
}
Nota: Al usar la opacitypropiedad para 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 desea aplicar opacidad a los elementos secundarios, como en nuestro ejemplo anterior, use valores de color RGBA . El siguiente ejemplo establece la opacidad para el color de fondo y no para el texto:
100% de opacidad
60% de opacidad
30% de opacidad
10% de opacidad
Aprendió de nuestro Capítulo de colores CSS , que puede usar RGB como un valor de color. Además de RGB, puede usar un valor de color RGB con un canal alfa (RGB A ), que especifica la opacidad de un color.
Un valor de color RGBA se especifica con: rgba(rojo, verde, azul, alfa ). El parámetro alfa es un número entre 0,0 (totalmente transparente) y 1,0 (totalmente opaco).
Sugerencia: aprenderá más sobre los colores RGBA en nuestro Capítulo de colores CSS .
Ejemplo
div {
background: rgba(0, 128, 0, 0.3) /* Green background with 30% opacity */
}