Fondos CSS - CSS Backgrounds
CSS background-color
CSS color de fondo
La background-color propiedad 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 se especifica con mayor frecuencia por:
un nombre de color válido, como "rojo"
un valor HEX - como "# ff0000"
un valor RGB, como "rgb (255,0,0)"
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 - Opacity / Transparency
La opacity propiedad 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;
}
Ejemplo completo:
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: green;
}
div.first {
opacity: 0.1;
}
div.second {
opacity: 0.3;
}
div.third {
opacity: 0.6;
}
</style>
</head>
<body>
- Nota: Al usar la opacity propiedad 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 totalmente transparente sea difícil de leer.
Transparencia usando RGBA
Si no desea aplicar opacidad a 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 el texto:Aprendió de nuestro Capítulo de colores CSS, que puede usar RGB como 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 (red, green, blue, alpha). El parámetro alfa es un número entre 0.0 (completamente transparente) y 1.0 (completamente opaco).
Ejemplo
div {
background: rgba(0, 128, 0, 0.3) /* Green background with 30% opacity */
}
Ejemplo completo:
<!DOCTYPE html>
<html>
<head>
<style>
div {
background: rgb(0, 128, 0);
}
div.first {
background: rgba(0, 128, 0, 0.1);
}
div.second {
background: rgba(0, 128, 0, 0.3);
}
div.third {
background: rgba(0, 128, 0, 0.6);
}
</style>
</head>
<body>
<h1>Caja transparente</h1>
<p>Con opacidad:</p>
<div style="opacity:0.1;">
<h1>10% opacity</h1>
</div>
<div style="opacity:0.3;">
<h1>30% opacity</h1>
</div>
<div style="opacity:0.6;">
<h1>60% opacity</h1>
</div>
<div>
<h1>opacity 1</h1>
</div>
<p>Con valores de color RGBA:</p>
<div class="first">
<h1>10% opacity</h1>
</div>
<div class="second">
<h1>30% opacity</h1>
</div>
<div class="third">
<h1>60% opacity</h1>
</div>
<div>
<h1>default</h1>
</div>
</body>
</html>
Recuerda suscribirte:
Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
Comentarios