La propiedad background-color de CSS, es una de las más sencillas y más utilizadas en CSS. Se complica cuando queremos dar algo de transparencia al fondo del elemento al que aplicamos el color de fondo.
Tabla de contenidos
Aplicar transparencia con opacity
Al usar la propiedad opacity para agregar transparencia al fondo de un elemento, todos sus elementos secundarios heredan la misma transparencia. Esto suele hacer que el texto pueda se poco legible.
La popiedad opacity puede tener un valor de 0.0 – 1.0. Cuanto menor sea el valor, más transparente:
Aplicar transparencia con valores RGBA
Si queremos que los elementos hijos no hereden la opacidad, debemos de dar la opacidad al elemento padre con los valores RGBA. Así veremos el tecto del interior del elemento, totalmente opaco, ya que esta transparencia no es heredada.
Ejercicio propuesto
Aquí tenéis el documento HTML, en el que está el enunciado en un comentario. Para descargarlo tenéis que pulsar el botón derecho del ratón sobre el enlace que os dejo abajo y seleccionar la opción de “Guardar enlace como” .
Despues del enlace del ejercicio, está el código de una posible solución.
<!DOCTYPE html>
<html>
<head>
<style>
/* Aplicar a cada <div> la opacidad o el valor RGBA que marca en el HTML */
div {
background-color: green;
}
div.first {
opacity: 0.1;
}
div.second {
opacity: 0.3;
}
div.third {
opacity: 0.6;
}
div.firstRGBA {
background: rgba(0, 128, 0, 0.1);
}
div.secondRGBA {
background: rgba(0, 128, 0, 0.3);
}
div.thirdRGBA {
background: rgba(0, 128, 0, 0.6);
}
</style>
</head>
<body>
<h1>Caja transparente</h1>
<p>Al usar la propiedad opacity para agregar transparencia al fondo de un elemento, todos sus elementos secundarios heredan la misma transparencia. Esto suele hacer que el texto pueda se poco legible</p>
<div class="first">
<h1>opacity 0.1</h1>
</div>
<div class="second">
<h1>opacity 0.3</h1>
</div>
<div class="third">
<h1>opacity 0.6</h1>
</div>
<div>
<h1>opacity 1 (default)</h1>
</div>
<p>Si queremos que los elementos hijos no hereden la opacidad, debemos de dar la opacidad al elemento padre,
con los valores RGBA</p>
<p>with RGBA color values:</p>
<div class="firstRGBA">
<h1>10% opacity with RGBA color values:(0, 128, 0, 0.1)</h1>
</div>
<div class="secondRGBA">
<h1>30% opacity with RGBA color values:(0, 128, 0, 0.3)</h1>
</div>
<div class="thirdRGBA">
<h1>60% opacity with RGBA color values:(0, 128, 0, 0.6)</h1>
</div>
</body>
</html>