Transparencia iframe

[jmm87]

Hola buen dia tengo un inconveniente con iframe y estaba buscando quien pueda ayudarme. Paso a detallar:

Tengo una pagina html con un fondo (imagen.jpg) llamada desde css. Detro de ese html tengo un iframe casi en el medio donde llama a otra pagina html y que claramente me tapa parte del fondo del html principal.. Como hago para que el iframe o la pagina que se abre dentro de ella sea transparente y vea el contenido pero siga viendo el fondo del html principal?

[alberto510a]

Hola.

Prueba a usar la propiedad opacity de css tiene valores de 0 a 1.

[pzin]

Normalmente los ifames tienen un fondo transparente por defecto. En IE8 y anteriores el truco era ponerle allowTransparency:

Código HTML:

<iframe allowTransparency="true">
 

Claro que, la página que vayas a cargar en ese iframe no tendría que tener ningún fondo especificado. O si acaso, un:

Código CSS:

body {
  background: transparent;
}
 

[alberto510a]

También podrías poner un div encima del iframe y cambiar la opacidad de este.

[jmm87]

gracias por la ayuda!.. el inconveniente es q sigue haciendo lo mismo
le puse al css lo siguiente:

Código CSS:

body {
    line-height: 1.5em;
    color: #6a6a6a;
    background: transparent;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
}
 

y al iframe:

Código HTML:

IFRAME NAME="galeria" SRC="galeria/galeria.html" WIDTH="100%" HEIGHT="390" FRAMEBORDER="0" MARGINWIDTH="0" MARGINHEIGHT="0" SCROLLING="no" allowTransparency="true"></IFRAME>
 

Iniciado por pzin

Normalmente los ifames tienen un fondo transparente por defecto. En IE8 y anteriores el truco era ponerle allowTransparency:

Código HTML:

<iframe allowTransparency="true">
 

y sigue tapandome el fondo del primer html con un fondo blanco. alg

Claro que, la página que vayas a cargar en ese iframe no tendría que tener ningún fondo especificado. O si acaso, un:

Código CSS:

body {
  background: transparent;
}
 

[jmm87]

Iniciado por alberto510a

También podrías poner un div encima del iframe y cambiar la opacidad de este.

como seria esto? probe con las otras opciones pero no me funciona

[alberto510a]

Prueba esto:

Código HTML:

<div style="opacity:0.3;filter:alpha(opacity=30);width:100%;height:390px;">
<iframe SRC="galeria/galeria.html" WIDTH="100%" HEIGHT="390" FRAMEBORDER="0"></iframe>
</div>
 

[jmm87]

Funcionar funciona... Lo que sucede es que le da opacidad a todo el contenido del div. Yo necesito que solo sea transparente el fondo no todo el contenido

Iniciado por alberto510a

prueba esto:

Código html:

<div style="opacity:0.3;filter:alpha(opacity=30);width:100%;height:390px;">
<iframe src="galeria/galeria.html" width="100%" height="390" frameborder="0"></iframe>
</div>
 

[alberto510a]

Eso ya es cosa de la página que coloques en el iframe. Deberás cambiarle a ella la opacidad en vez de al div y ya.

[jmm87]

Iniciado por alberto510a

Eso ya es cosa de la página que coloques en el iframe. Deberás cambiarle a ella la opacidad en vez de al div y ya.

muchas graciass amigo pero boy al css del html que esta insertado en el iframe y le doy la transparencia y me sigue poniendo en transparencia toda la pagina

[jmm87]

yo quiero ver el fondo del html principal ..y si uso cualquier de las opciones que me dieron la transparencia o opacidad se la doy a todo el contenido del iframe no al fondo del html que esta dentro del iframe

[alberto510a]

Lo que podrías hacer es que en la web del iframe hagas esto:

1º creas div que ocupe todo el body, es decir, 100% de width y height
2º le pones de background la imagen que quieras
3º al body le aplicas transparencia

Saludos

[arcanisgk122]

me gustaría ver los códigos de cada html para decirte con mas exactitud que estas asiendo mal

[pzin]

Lo de la opacidad no va a funcionar, porque se hereda forzosamente.

Como dice arcanisgk122, pon el código que estés usando.

[jmm87]

Iniciado por arcanisgk122

me gustaría ver los códigos de cada html para decirte con mas exactitud que estas asiendo mal

te lo puedo enviar a algun mail?
si haces que funcione me pegas en el foro la respues asi la ven todos
porque no me funciono ninguna de las opciones q me dieron

[jmm87]

Iniciado por pzin

Lo de la opacidad no va a funcionar, porque se hereda forzosamente.

Como dice arcanisgk122, pon el código que estés usando.

de hecho ninguna de las opciones que me dieron funciono :(

[Rafael]

Básicamente, si no está funcionando estás haciendo algo mal.

El ejemplo funcionando. Hasta abajo hay un archivo para descargar. Tiene transparencias por todos lados, fondo transparente en los 2, un div con opacity y todo funciona bien.

Un link al demo: http://otake.com.mx/Foros/Iframe/1-Contenedor.html

(Actualicé el zip)

Los archivos son estos:

Código HTML:

<html>
<body style="background-color: #369; color: red; background-image: url(Fondo1.png);">
<h1>Hola</h1>
<iframe src="2-Contenido.html" height="500" width="500">Prueba Iframe</iframe>
</body>
</html>
 

Código HTML:

<html>
<body style="background-image: url(Fondo2.png);">
<h1>Prueba</h1>
<div style="background-color: #FF0; width: 100px; height: 100px;">Texto</div>
<div style="background-color: #FF0; width: 100px; height: 100px; opacity: .5;">Texto</div>
</body>
</html>