web-dev-qa-db-fra.com

Il n'y a pas d'attribut "allowtransparency"

Je cherche une autre façon de faire:

<iframe transparency=true   ...

Lorsque je fais la validation W3C, j'obtiens l'erreur:

Column 31: there is no attribute "allowtransparency"

Si vous utilisez ce CSS,

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

pour l'extrait ci-dessus, je reçois un iframe vide.

htmlcssw3cw3c-validation
35
Bharanikumar

Bien qu'il soit vrai que les spécifications HTML du W3C ne le définissent pas, il existe un attribut allowTransparency, et il est pris en charge par tous les navigateurs modernes (et Internet Explorer). Comme HTML5 nous l'a appris, le chariot est censé être devant le cheval.

Supposons que vous ayez ce code HTML sur votre page principale, index.html:

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

Et votre source.html ressemble à ceci:

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

Lorsque vous ouvrez la page principale (index.html) dans votre navigateur, vous verrez le texte de source.html dans un iframe, mais il aura un fond vert clair.

(Testé avec Safari, Firefox et Chrome sous Mac OS X et Internet Explorer 8 et Chrome sous Windows XP)

Modifier: La clé est la suivante: la page source ne peut pas définir son propre arrière-plan. Si c'est le cas, il ignore l'arrière-plan transparent.

Mise à jour: Je viens de tester cela (mars 2019) en utilisant Safari 12, Chrome 73 et Firefox 65 sur macOS High Sierra, et cela fonctionne toujours.

32
james.garriss

Je ne suis pas sûr de ce que vous essayez de faire ici, mais cela devrait être ce que vous recherchez:

iframe {
    background-color: transparent;
}

Cela suppose, bien entendu, que vous souhaitiez que l'arrière-plan du iframe soit transparent.

13
Yi Jiang

Il existe un moyen de le faire avec jQuery si vous avez inclus le fichier jQuery -

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

Remplacez .classname par celui de votre iframe ou créez-en un s'il n'y en a pas. (Retirez également l'attribut de l'iframe) Mettez-le juste après la balise de fermeture iframe et il ajoute la balise allowTransparency requise pour les navigateurs avant IE9. Comme il se trouve dans l'instruction conditionnelle IE, il n'est pas lu par le validateur W3C. Il élimine également la compatibilité entre navigateurs et les problèmes de masquage de contenu en ajoutant tous les CSS que les gens ont déjà mentionnés, si vous utilise de toute façon la dernière version de jQuery. L'attribut allowTransparency a été créé dans un but clairement défini, il est donc inutile d'essayer de le recréer avec CSS lorsque vous pouvez simplement l'insérer en silence. J'espère que cela aide quelqu'un!

(Cette méthode suppose que vous avez déjàiframe {background-color:transparent}qui ne fonctionne pas sur les anciennes versions IE versions)

4
Joe H

Tout d'abord, il n'y a pas de "transparence =" vrai "', donc cela ne fonctionnera pas.

Deuxièmement, essayez-vous de rendre l'arrière-plan transparent ou l'ensemble de l'iframe transparent?

La propriété CSS Opacity rend tout à l'intérieur de l'élément sur lequel vous l'utilisez transparent. L'opacité varie de 0 à 1, où 0 est complètement transparent, 0,5 est à moitié transparent et 1 est complètement visible.

Si vous l'utilisez sur une div ou une iframe (ou quoi que ce soit), l'arrière-plan et le texte seront tous également estompés.

D'un autre côté, dans tous les navigateurs modernes, vous pouvez définir le backround pour qu'il soit partiellement transparent en utilisant la couleur RGBA. Vous devez le faire comme ceci:

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);
}

La définition de couleur RGBA fonctionne exactement comme l'attribut d'opacité (0 = clair, 1 = solide), sauf qu'elle ne rend transparent que l'élément spécifique sur lequel vous la définissez et n'affecte pas les éléments à l'intérieur de cet élément (c'est-à-dire qu'elle n'affecte pas le texte à l'intérieur votre iframe). Les trois premiers nombres sont les valeurs rouge, verte et bleue de votre couleur sur une échelle de 0 à 255.

Si vous voulez une meilleure solution multi-navigateur, je vous recommande simplement d'utiliser un fichier .png transparent comme image de fond. Vous devrez tester cela sur IE, vous ne savez pas si cela fonctionnera spécifiquement pour un iframe, mais vous ne pouvez définir aucun arrière-plan sur l'iframe, puis définir l'image transparente comme arrière-plan de la page que vous chargez à l'intérieur de l'iframe (appliquez-la à l'élément de corps de cette page).

J'espère que cela t'aides!

1
Andrew

  1. Il n'y a pas d'attribut HTML nommé transparency, vous obtiendrez donc toujours une erreur avec iframe transparency=true

  2. si vous définissez l'opacité sur zéro, vous ne verrez pas du tout l'élément - vous devez définir le degré d'opacité:

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

Le CSS ci-dessus (remarque: les valeurs d'opacité sont 0-100 pour IE, 0-1 pour les autres navigateurs) permettra aux autres éléments derrière (par exemple une image d'arrière-plan de page) de s'afficher, même si l'élément avec le paramètre d'opacité a un arrière-plan coloré .

Pour plus de contrôle sur la transparence, voir RGBA (A = alpha) , mais faites attention à la prise en charge du navigateur variable.

1
Dave Everitt