Background color con opacity y RGBA en CSS

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.

 

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:

opacity
Con opacity el texto también se transparenta

 

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.

valores-RGBA
El texto no hereda la transparencia del elemento padre

 

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.

Ejercicio background opacity

<!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>

 

 

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *