Autor Tema: HTML y CSS aplicar colores de fondo con transparencia Web safe colors (CU01020D) (Leído 2776 veces)

Lorenzo31 · « **en:** 13 de Febrero 2016, 20:27 »

Buenas dejo la solución de mi ejercicio.

<!DOCTYPE html>
<html>
	<head> <meta charset = "utf-8"/> 
		<link rel="stylesheet" type="text/css" href="estilos120D.css"/>
	</head>
	<body>
		
			<div class="primeraRojo">RGB 178,34,34 con transparencia 0.1</div>
			<div class="segundaRojo">RGB 178,34,34 con transparencia 0.2</div>
			<div class="terceraRojo">RGB 178,34,34 con transparencia 0.3</div>
			<div class="cuartaRojo">RGB 178,34,34 con transparencia 0.4</div>
			<div class="quintaRojo">RGB 178,34,34 con transparencia 0.5</div>
			<div class="sextaRojo">RGB 178,34,34 con transparencia 0.6</div>
			<div class="septimaRojo">RGB 178,34,34 con transparencia 0.7</div>
			<div class="octavaRojo">RGB 178,34,34 con transparencia 0.8</div>
			<div class="novenaRojo">RGB 178,34,34 con transparencia 0.9</div>
			<div class="decimaRojo">RGB 178,34,34 con transparencia 1</div>
			<hr/>
			<div class="primeraAmarillo">RGB 218,165,32 con transparencia 0.1</div>
			<div class="segundaAmarillo">RGB 218,165,32 con transparencia 0.2</div>
			<div class="terceraAmarillo">RGB 218,165,32 con transparencia 0.3</div>
			<div class="cuartaAmarillo">RGB 218,165,32 con transparencia 0.4</div>
			<div class="quintaAmarillo">RGB 218,165,32 con transparencia 0.5</div>
			<div class="sextaAmarillo">RGB 218,165,32 con transparencia 0.6</div>
			<div class="septimaAmarillo">RGB 218,165,32 con transparencia 0.7</div>
			<div class="octavaAmarillo">RGB 218,165,32 con transparencia 0.8</div>
			<div class="novenaAmarillo">RGB 218,165,32 con transparencia 0.9</div>
			<div class="decimaAmarillo">RGB 218,165,32 con transparencia 1</div>
	</body>
</html>

estilos120D.css

Código: [Seleccionar]

html,
body,
.primeraRojo { background-color:rgba(178, 34, 34, 0.1); }
.segundaRojo { background-color:rgba(178, 34, 34, 0.2); }
.terceraRojo { background-color:rgba(178, 34, 34, 0.3); }
.cuartaRojo { background-color:rgba(178, 34, 34, 0.4); }
.quintaRojo { background-color:rgba(178, 34, 34, 0.5); }
.sextaRojo { background-color:rgba(178, 34, 34, 0.6); }
.septimaRojo { background-color:rgba(178, 34, 34, 0.7); }
.octavaRojo { background-color:rgba(178, 34, 34, 0.8); }
.novenaRojo { background-color:rgba(178, 34, 34, 0.9); }
.decimaRojo { background-color:rgba(178, 34, 34, 1); }

.primeraAmarillo { background-color:rgba(218, 165, 32, 0.1); }
.segundaAmarillo { background-color:rgba(218, 165, 32, 0.2); } 
.terceraAmarillo { background-color:rgba(218, 165, 32, 0.3); } 
.cuartaAmarillo { background-color:rgba(218, 165, 32, 0.4); } 
.quintaAmarillo { background-color:rgba(218, 165, 32, 0.5); } 
.sextaAmarillo { background-color:rgba(218, 165, 32, 0.6); } 
.septimaAmarillo { background-color:rgba(218, 165, 32, 0.7); } 
.octavaAmarillo { background-color:rgba(218, 165, 32, 0.8); }
.novenaAmarillo { background-color:rgba(218, 165, 32, 0.9); } 
.decimaAmarillo { background-color:rgba(218, 165, 32, 1); }

César Krall · « **Respuesta #1 en:** 15 de Febrero 2016, 13:02 »

Hola! En el CSS

html,
body,
.primeraRojo { background-color:rgba(178, 34, 34, 0.1); }

Equivale a

html, body, .primeraRojo { background-color:rgba(178, 34, 34, 0.1); }

Esto tiene poco sentido porque estás asignando un color de fondo a html y también a body cuando ambas cosas supone aplicarlo a toda la página

Déjalo .primeraRojo { background-color:rgba(178, 34, 34, 0.1); } y todo resuelto

Saludos!

Lorenzo31 · « **Respuesta #2 en:** 15 de Febrero 2016, 13:25 »

Vale gracias, tomo nota, claro la coma le asigna lo que haya en los corchetes, vale fallo mio.
Pensaba que era una forma de organizar y dejar la etiqueta html y body vacias para el futuro.

Gracias por el aporte César.

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias: