Comunidad de diseño web y desarrollo en internet

Cómo poner el fondo transparente de un iframe

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>

¿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.

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate