Fondo transparente con CSS

Escrito por
WillxD
el 31 de January del 2009 en
CSS
ActiveDen - Encuentra los mejores archivos Flash, Flex desde $1
fondo-transparencia

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>
3Docean - Modelos 3D, Texturas y m‡s desde $1
Anunciate aqui

9 Respuestas en “Fondo transparente con CSS”

  1. 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 ^^, ...

    Reply
  2. 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 :P y además aun no termino con el de Java.. que por falta de tiempo no puedo postear U.u!

    Reply
  3. 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 :D , 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!!

    Reply
  4. 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.

    Salu2 :)

    Reply
  5. juan says:
    4 June 2009 at 11:34

    gracias men por fin lo encuentro

    Reply
  6. enchufe says:
    17 April 2010 at 7:17

    con este html los parrafos no estarían heredando las propiedades de transparencia?

    Reply
  7. ruben says:
    19 October 2010 at 20:59

    Gracias amigaso!! he estado buscando este tema por todos lados y por fin gracias a su ayuda lo pude conseguir. Gracias de nuevo!

    Reply
  8. eder says:
    6 September 2011 at 22:54

    gracias amigo, esta cool, la transparencia. una consulta? q el texto que esta ahi no sea transparente?...se podra?

    Reply

Deja tu Comentario