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
Código página INTERIOR.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>
<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>
<head>
<style>
body {background-color:transparent;} /* fondo transparente FireFox */
</style>
</head>
<body>
<!-- interior del Iframe //-->
</body>
</html>
¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.
Por Linker - Pixmedial el 18 de Junio de 2008
saludos
Por Eduardo el 11 de Julio de 2008
Ya estaba empezando a insultar porque firefox3 muestra por defecto el background transparente e IE lo muestra en blanco.
De nuevo muchas gracias
Por Ayalga el 16 de Julio de 2008
Ya me estaba empezando a volver loca, te debo mi cordura
Por a mi no me funciona el 30 de Julio de 2008
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 Francisco el 31 de Julio de 2008
a mi no me funciona !!!-b :
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 Vale el 27 de Agosto de 2008
(click para ampliar)
Por Internet Nets el 18 de Septiembre de 2008
Por mariano el 09 de Noviembre de 2008
SALUDOS.
Por tara el 15 de Noviembre de 2008
Por Claudia el 19 de Noviembre de 2008
Por Ram Diablo el 18 de Enero de 2009
Por Real el 03 de Marzo de 2009
Por thehunter el 22 de Abril de 2009
Por muerto de la basura el 08 de Mayo de 2009
Asi q por las huevax es
Por Gustavo Leon el 14 de Mayo de 2009
Por ale el 12 de Julio de 2009
pues si esta prefectoo
graziaz por la ayuda
Por Rck_Roll el 21 de Julio de 2009
en Explorer 7.0 no me funciona
Por Osmosi el 06 de Agosto de 2009
Por -eFe- el 21 de Agosto de 2009
gracias
mi mail es [email protected]
Por GABRIELA MARACAY el 01 de Octubre de 2009
Por ccenta el 15 de Octubre de 2009
<HTML>
<HEAD>
<style type="text/css">
Body {
background-image: url('hola.jpg');
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
</style>
<HEAD>
<BODY>
Por TLo el 23 de Noviembre de 2009
Por Pepe el 03 de Diciembre de 2009
(body { background:none;
Por luis el 14 de Diciembre de 2009
Por Diego Cruz el 26 de Enero de 2010
Por KingDuck el 19 de Marzo de 2010
Por Brahyan Maya el 02 de Agosto de 2010
De nuevo Gracias
Por nesman el 05 de Septiembre de 2010
<style>
body{background-color:transparent;}
</style>
y en la pagina principal donde esta el frame que llama al html hice esto:
<frame allowtransparency="allowtransparency"
y recien con eso funciono en ie 8.
Saludos
Por Fernando el 24 de Febrero de 2011
Me ha solucionado el problema que tenía. Siempre perdiendo tiempo con Internet Explorer...pf...
Gracias!
Por TWV el 21 de Marzo de 2011
Por Edgard_Roul el 14 de Septiembre de 2011
Por sam el 31 de Diciembre de 2011
Por Cristian el 16 de Enero de 2012
Atte. Cristian Vera C.
Diseño y programación multimedia.
cel: 9-7755320 - Ofi: 6642373
www.krick.cl