Fondo transparente con CSS

CSS |
Comments (5)

En un post anterior vimos como aplicar transparencia a imagenes, ahora aplicaremos la transfarencias a una imagen de fondo y sobre el poner un texto de tal manera que se note la transparencia.

En el CSS:

.bg {
	width: 350px;
	height: 325px;
	background: url(imgbg.jpg);
}
 
.trans {
	background-color: #FFFFFF;
	opacity: 0.6;
	filter:alpha(opacity=60);
	width: 170px;
	margin-left:140px;
	border: solid 2px #FFFFFF;
}
 
.trans p {
	margin: 5px;
	color: #000000;
	padding-left:30px;
}

En el HTML

<div class="bg">
<div class="trans">
Esta es una transparencia xD!
</div>
</div>

Si te gusto recomiendalo

Articulos Relacionados

5 Respuestas en “Fondo transparente con CSS”

WeekxXxoN says:

1 February 2009 at 22:04

wo0o0o…Savias que no ce CSS =/ …
Pero estoy aprendiendo xD …
Ahora si comprendo con los pocos conosimientos que tengo de
CSS….

Oie quetal si creas un tutorial de CSS..DEsde CEro ??

Grasias por el aporte ^^, …

WillxD says:

2 February 2009 at 14:27

=O pero CSS solo es cuestion de saber los codigos :jojo: y segun tus ideas lo armas a tus medidas y además aun no termino con el de Java.. que por falta de tiempo no puedo postear U.u!

lumbreras says:

29 May 2009 at 21:57

Ooorale con tu theme nuevo, pensé que era la única alucinada que le gustaba cambiar plantilla jajaja, está chida, sencilla, pero lo que se me hace muy fregón es el efecto de tu menú de navegación , por cierto esto de la transparencia funciona en IE6? ahorita, un cliente le puse una imagen en PNG y me mando una captura de pantalla de su página, además de algunas irregularidades en los div, me di cuenta que una imagen en PNG, no se ve transparente, tengo que arreglar eso X(, en fin, saludos!!

WillxD says:

31 May 2009 at 9:12

El menú se me olvidó arreglarlo, porque no tuve tiempo (Algun error de programación).

El problema es que IE6 tiene problemas con las imagenes PNG pero se solucionan con un script Javascript.
Yo ahora ando utilizando el unitpngfix.js y me funciona perfectamente en IE6.