Cristalab

                 ¿Quieres registrarte?

Cómo poner el fondo transparente de un iframe

Por: El Oso Amoroso
10 de Junio del 2008
10,082 visitas
css

Los iframes no son una técnica recomendada en Cristalab, pues muchas veces, es preferible, para cumplir el mismo cometido, usar AJAX (más aquí).

Dicho esto, hay que reconocer que los Iframes cumplen muy adecuadamente para ciertos requisitos, y en ocasiones son necesarios.
Discernir cuándo hay que usar uno, y cuándo otro, no es objeto de este tip.

Esta vez hablaremos sobre:

Cómo poner fondo transparente a un IFRAME.


Para Firefox:
iframe {background-color:transparent;}
(en la página que contiene el IFRAME:)

Para Ópera:
body {background-color:transparent;}
(en la página a la que refiere el IFRAME:)

Para IE:
No tiene solución (como siempre) mediante CSS con código W3C, sino que, además de emplear la solución de "Opera", hay que usar código propietario:
<iframe allowtransparency="allowtransparency" src="..." ></iframe>
(en el código del IFRAME:)
body {background-color:transparent;}
(en la página a la que refiere el IFRAME:)

Para FireFox + Opera + Internet Explorer
Tan fácil como juntar las tres acciones.
Abajo, un ejemplo:
Código página CONTENEDOR.html
<html>
<head>
<style>
body {background-color:#DDD; background-image:url('http://url.ie/fiv');}
iframe {background-color:transparent;} /* fondo transparente Opera */
</style>
</head>
<body>
<iframe allowtransparency="allowtransparency" src="INTERIOR.html" ></iframe>
<!-- fondo transparente IExplorer //-->
</body>
</html>

Código página INTERIOR.html
<html>
<head>
<style>
body {background-color:transparent;} /* fondo transparente FireFox */
</style>
</head>
<body>
<!-- interior del Iframe //-->
</body>
</html>


Artículos Relacionados


Etiquetas css

Comentarios | Enviar un comentario
Muy bueno aunque reconozco que he estado obligado a utilizar iframe siempre he necesitado dejarlo transparente para no afectar el diseño y el background


saludos
Por: Linker - Pixmedial-blog
Excelente muchas gracias por compartir este tip.

Ya estaba empezando a insultar porque firefox3 muestra por defecto el background transparente e IE lo muestra en blanco.

De nuevo muchas gracias ^^
Por: Eduardo-blog
Gracias!!!!!!!!!!!

Ya me estaba empezando a volver loca, te debo mi cordura :P
Por: Ayalga-blog
Hola:
he leido este tip y la verdad es que es bueno. Lo malo es que a mí no me funciona con IE7. ¿Tiene que ver algo la versión?¿Influye el hecho de verlo en modo local?¿Influye el meter el iframe en algún tipo de contenedor tipo capa, o celda?
Gracias y saludos.
Por: a mi no me funciona !!!-b
Gracias compadre!
Por: Francisco-blog

a mi no me funciona !!!-b :

Hola:
he leido este tip y la verdad es que es bueno. Lo malo es que a mí no me funciona con IE7. ¿Tiene que ver algo la versión?¿Influye el hecho de verlo en modo local?¿Influye el meter el iframe en algún tipo de contenedor tipo capa, o celda?
Gracias y saludos.
Tal y como está en el ejemplo, funciona bien en IE7
Por: El Oso Amoroso
no funciona en IE7 :(
Por: Vale-blog
Claro que funciona en IE7.


(click para ampliar)
Por: El Oso Amoroso
hola.. hablando de iframe quisiera poner un iframe encima de otro iframe y me explico... tengo un iframe dentro de mi pagina con una pelicula shockwave que cuando las personas le dan clic los envia a otra direccion y quiero poner otro iframe con una imagen transparente que si dan clic los envie a una direccion q yo quiero q vallan o q porlomenos bloquee el clic....

es esto posible???

me pueden enviar comentarios info@internetnets.com y pueden ver mi problema en [url]www.787internet.com/tv[url]

Gracias...
Por: Internet Nets-blog
La verdad que el san google nunca se equiboca con las primeras opciones, despues de aver terminado de diseñar, al mirar en mozila todo ok! como yo queria, despues me acorde que mi cliente.... usa IE.... al probarlo se me vino el mundo abajo, pero gracias a este blog, y a sus administradores, y sus aportadores, solucionados.

SALUDOS.
Por: mariano-blog
este puto codigo no sirve para xat mamones chingen a su madre putos adsadfsfgggggggggggggggggggggtgertyewrqwrwqrwerweretdrgdkgjsdfkgjkdfljglfnbgkcnbfkdxcgm,dklgnkldfzjgkldfjgc
Por: yo no tu puto-blog
dssssssssssssssEEEEEEEEEEEEEEEWWWWWWWWWWAADASJDKSFGERJKGFRKGFKDHGFSDHFSDFBSDNFBCXNVBJVHDFJKHSDFJDHFJSHDFJKHSDKJFHEIHWRIEUSFHSEIFSDFUESJKDFHSJFNADFSOAJFOIETHRIOGTHRIODGHDOFHSUEROTIREJGRDKGJEORGTJEGOJEIGODSIGJSDIOGNSDIOGHIODHJTGGGGGGGGGGGGGGGGGGGGGGG xq ke evitar el ke q xq y ab re ba icciones gfghghgfefaerfrsputodsdsadfsafefdwaedddddddddddddddddddddddddddddewrwqeqweeeeeeeee
Por: aSADASFSDFSDFfdsgr-blog
ta
Por: tara-blog
Excelente! Gracias!
Por: Claudia-blog
perfecto no acostumbro dejar comentarios pero este codigo que cayo como anillo al dedo muchas gracias me sirvio de maravilla
Por: Ram Diablo-blog
Muchas Gracias.
Por: Real-blog
mil gracias. con esto solucione lo q queria hacer con mi pagina web
Por: thehunter-blog
funca pero no es validado por la W3C
Asi q por las huevax es
Por: muerto de la basura-blog
uffff......gracias por esto, en verdad me ayudaron reguero,no es aceptado por la W3C pero funcionaala perfeccion
Por: Gustavo Leon-blog
Deja un comentario
IMPORTANTE

Recuerda ser respetuoso, no insultes a otras personas, ni uses palabrotas, hay una persona al otro lado de la pantalla.

Habla bien, NO ESCRIBAS EN MAYUSCULA TODO, no escribas como en un SMS, evita cosas como "ke", "x q" y demás abreviaciones.

Aquí funcionan las etiquetas de los foros, puedes usar [b] para negrita, [img] para las imágenes, [url] para los enlaces, etc.

Si tienes preguntas técnicas, envíalas mejor al foro.