2010-09-18 21 views
29

Busco alguna forma alternativa de hacer:no hay ningún atributo "allowtransparency"

<iframe transparency=true ... 

Cuando hago la validación del W3C, estoy consiguiendo el error:

Column 31: there is no attribute "allowtransparency" 

Si el uso de este CSS,

.iframe-trans-fix{ 
    opacity: 0; 
    filter:alpha(opacity=0); 
} 

para el fragmento anterior Me aparece un iframe en blanco.

Respuesta

31

Si bien es cierto que las especificaciones de HTML del W3C no lo definen, existe un atributo allowTransparency, y es compatible con todos los navegadores modernos (e Internet Explorer). Como nos ha enseñado HTML5, se supone que el carro está delante del caballo.

Suponga que tiene este código HTML en su página principal, index.html:

<html> 
    <body> 
     <iframe src="source.html" 
       allowTransparency="true" 
       style="background-color:lightgreen;" 
       width="400" height="200"> 
     </iframe> 
    </body> 
</html> 

Y su source.html se parece a esto:

<html> 
    <body> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin gravida, magna 
      id bibendum sollicitudin, tellus tortor consequat enim, et mollis mauris 
      augue et dui. </p> 
    </body> 
</html> 

Al abrir la página principal (índice. html) en su navegador, verá el texto de source.html en un iframe, pero tendrá un fondo verde claro.

(Probado con Safari, Firefox y Chrome en Mac OS X e Internet Explorer 8 y Chrome en Windows XP)

Editar: La clave es la siguiente: La página de origen no puede establecer su propio fondo. Si lo hace, ignora el fondo transparente.

+1

Este atributo puede no ser tan ampliamente utilizado como crees, ¿viste si realmente cambió el comportamiento en navegadores distintos de IE? Por lo que puedo decir, este es un atributo específico de IE y los otros navegadores predeterminados permiten transparencia en iframes y simplemente ignoran este atributo. –

+0

Vuelve a leer mi respuesta. La respuesta a tu pregunta ya está allí. –

+0

@ james.garriss Leí su respuesta y usted específicamente escribe que todos los navegadores admiten el atributo, no su funcionalidad. Los navegadores que no son de Internet Explorer se comportan como Internet Explorer (se comporta aparentemente el 8 y el inferior) cuando el atributo está configurado para él, incluso cuando el atributo no está establecido para ellos. Chrome no parece ser compatible con la propiedad DOM. ¿Qué crees que apoya exactamente? – PhistucK

12

no estoy seguro de lo que estás tratando de hacer aquí, pero esto debe ser lo que busca:

iframe { 
    background-color: transparent; 
} 

Esto es, por supuesto, asumiendo que desea que el fondo de la iframe ser transparente.

1
  1. no hay ningún atributo HTML denominado transparency, por lo que será siempre obtener un error con iframe transparency=true

  2. si se establece la opacidad a cero, no podrá ver el elemento del todo - lo que necesita para definir el grado de opacidad:

    opacity: 0.25; /* all modern browsers */ 
    filter: alpha(opacity=25) /* IE */ 
    

el CSS anterior (nota: los valores de opacidad son 0-100 para IE, 0-1 para otros navegadores) permitirá el acceso de otros elementos (p. una imagen de fondo de página) para mostrar, incluso si el elemento con la configuración de opacidad tiene un fondo de color.

Para obtener más control sobre la transparencia, consulte RGBA (A = alpha), pero tenga cuidado con el soporte del navegador variable.

+0

en IE, mi iframe va transparente, pero la cosa es i cant capaz de ver el contenido de mi dentro del marco flotante también .. – Bharanikumar

+0

¿Puedes poner una página de muestra? Si el contenido del iframe es totalmente invisible, entonces adivinaría (sin verlo) eso: no está obteniendo el contenido del iframe, el contenido está heredando otra configuración CSS, o (obvio, pero vale la pena revisarlo) su propiedad de color es la misma que el color de fondo. Establezca el color en rojo y elimine la regla de opacidad. ¿Aún no aparece? –

1

En primer lugar, no existe tal cosa como 'transparency =' true '', por lo que no funcionará.

En segundo lugar, ¿está tratando de hacer que el fondo sea transparente o que todo el iframe sea transparente?

La propiedad de opacidad de CSS hace que todo lo que se encuentre dentro de cualquier elemento que utilice sea transparente. La opacidad escala de 0 a 1, donde 0 es completamente transparente, 0.5 es mitad transparente y 1 es completamente visible.

Si usa esto en un div o un iframe (o cualquier otro), el fondo y el texto se desvanecerán por igual.

Por otro lado, en todos los navegadores modernos puede configurar que el fondo sea parcialmente transparente usando el color RGBA. Usted debe hacerlo de esta manera:

iframe.transparent { 
    background-color: #FFF; /*this gives a background color for browsers that can't do RGBA color, like internet explorer*/ 
    background-color: rgba(255,255,255,0.5); 
} 

El RGBA definición de color funciona igual que el atributo de opacidad (0 = claro, 1 = sólido), excepto que sólo hace que el elemento específico que le prendieron transparente y no afecta los elementos dentro de ese elemento (es decir, no afecta el texto dentro de su iframe). Los primeros tres números son los valores rojo, verde y azul de su color en una escala de 0 a 255.

Si desea una mejor solución de navegador cruzado, recomiendo simplemente usar .png transparente archivo como una imagen de fondo.Tendrás que probar esto en IE, no estoy seguro de si funcionará para un iframe específicamente, pero podrías no establecer fondo en el iframe y luego establecer la imagen transparente como fondo de la página que cargues dentro del iframe (aplicarlo) al elemento del cuerpo para esa página).

Espero que esto ayude!

+0

esto es cambios, según la muestra de arriba, ESTO ES IFRAME ÁREA pero todavía no hay ninguna actualización, en IE mi ifram es blanco pero el sitio es negro BG – Bharanikumar

+0

¿Puede compartir un enlace a la página en la que está trabajando para que pueda ver el código completo? – Andrew

3

Hay una manera que usted puede hacer esto con jQuery si ha incluido el archivo de jQuery -

<!--[if lt IE 9]><script> $(".classname").attr("allowTransparency", "true"); </script><![endif]--> 

Cambio .classname a la de su marco flotante o hacer uno si no hay uno. (Elimine también el atributo del iframe) Ponerlo recto después de la etiqueta de cierre del iframe y agrega la etiqueta allowTransparency requerida para los navegadores antes de IE9. Como está dentro de la declaración condicional de IE, el validador W3C no lo lee. También elimina la compatibilidad de navegadores cruzados y los problemas de ocultación de contenido al agregar todos los CSS que las personas ya han mencionado, si está usando la última versión de jQuery de todos modos. El atributo allowTransparency se creó con un propósito claramente definido, por lo que no tiene sentido intentar volver a crearlo con CSS cuando puede insertarlo en silencio. Espero que esto ayude a alguien!

(Este método asume que ya tiene iframe {background-color:transparent} que no funciona en las versiones anteriores de IE)

+0

+1 por tratar de proporcionar una forma alternativa, que se solicitó. No lo he probado realmente sin embargo. –

+4

No es necesario involucrar a jQuery aquí. Esto es suficiente: document.getElementById ("yourframeid"). AllowTransparency = true; – tomg

+0

Para autocitar "** si ** lo tiene instalado". No dije que tenías que instalarlo solo para hacer esto. Si no lo has hecho, entonces estoy de acuerdo en que tu camino sería mejor. –

Cuestiones relacionadas