CSS Fondos
Las propiedades de fondo CSS se utilizan para agregar efectos de fondo a los elementos.
En estos capítulos, aprenderá sobre las siguientes propiedades de fondo CSS:
background-colorbackground-imagebackground-repeatbackground-attachmentbackground-positionbackground(propiedad abreviada)
CSS background-color
La propiedad background-color especifica el color de fondo de un elemento.
Ejemplo
El color de fondo de una página se establece de la siguiente manera:
body {
background-color: lightblue;
}
Try it Yourself »
Con CSS, un color generalmente se especifica mediante:
- un nombre de color válido, como "red"
- un valor HEX - como "#ff0000"
- un valor RGB - como "rgb(255,0,0)"
Consulte 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;
}
Try it Yourself »
Opacity / Transparency (Opacidad / Transparencia)
La propiedad opacity especifica la opacidad/transparencia de un elemento. Puede tomar un valor entre 0,0 y 1,0. Cuanto menor sea el valor, más transparente será:
opacity 1
opacity 0.6
opacity 0.3
opacity 0.1
Nota: Al usar la propiedad opacidad para añadir transparencia al fondo de un elemento, todos sus elementos secundarios heredan la misma transparencia. Esto puede dificultar la lectura del texto dentro de un elemento completamente transparente.
Transparencia usando RGBA
Si no desea aplicar opacidad a los elementos secundarios, como en el ejemplo anterior, utilice valores de color RGBA. El siguiente ejemplo define la opacidad del color de fondo, no del texto:
100% opacity
60% opacity
30% opacity
10% opacity
En nuestro Capítulo de Colores CSS, aprendiste que puedes usar RGB como valor de color. Además de RGB, puedes usar un valor de color RGB con un canal alfa (RGBA), 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).
Consejo: Aprenderás más sobre los colores RGBA en nuestro Capítulo de colores CSS.
Ejemplo
div {
background: rgba(0, 128, 0, 0.3) /* Fondo verde con 30% de opacidad */
}
Try it Yourself »
La propiedad de color de fondo CSS
| Propiedad | Descripción |
|---|---|
| background-color | Establece el color de fondo de un elemento |
CSS — Colores de fondo — Vídeo de W3Schools
Este vídeo es una introducción a los colores de fondo en CSS.
¡Parte de una serie de videotutoriales para aprender CSS para principiantes!
