ich für einige alternative Art und Weise suchen zu tun:Es gibt kein Attribut „allowtransparency“
<iframe transparency=true ...
Als ich tun, um die W3C-Validierung, erhalte ich die Fehlermeldung:
Column 31: there is no attribute "allowtransparency"
Wenn die Verwendung dieses CSS,
.iframe-trans-fix{
opacity: 0;
filter:alpha(opacity=0);
}
für das obige Snippet bekomme ich einen leeren iframe.
Obwohl es stimmt, dass die HTML-Spezifikation des W3C es nicht definiert, gibt es ein allowTransparency-Attribut, und es wird von allen modernen Browsern (und Internet Explorer) unterstützt. Wie uns HTML5 beigebracht hat, soll der Wagen vor dem Pferd stehen.
Angenommen, Sie HTML auf Ihrer Haupt-Seite haben, index.html:
<html>
<body>
<iframe src="source.html"
allowTransparency="true"
style="background-color:lightgreen;"
width="400" height="200">
</iframe>
</body>
</html>
Und Ihre source.html sieht wie folgt aus:
<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>
Wenn Sie die Haupt-Seite (Index öffnen. html) In Ihrem Browser sehen Sie den Text von source.html in einem iframe, aber er hat einen hellgrünen Hintergrund.
(getestet mit Safari, Firefox und Chrome auf Mac OS X und Internet Explorer 8 und Chrome unter Windows XP)
Edit: Der Schlüssel ist dies: Die Seite Quelle keinen eigenen Hintergrund festlegen. Wenn dies der Fall ist, ignoriert es den transparenten Hintergrund.
Ich bin nicht sicher, was Sie versuchen, hier zu tun, aber das sollte sein, was Sie suchen:
iframe {
background-color: transparent;
}
Das ist, natürlich, vorausgesetzt, dass Sie den Hintergrund der iframe wollen transparent sein.
Es gibt keine HTML-Attribut transparency benannt, so dass Sie immer einen Fehler mit iframe transparency=true
wenn Sie Opazität auf Null gesetzt ist, wird das Element überhaupt nicht sehen - Sie brauchen
opacity: 0.25; /* all modern browsers */
filter: alpha(opacity=25) /* IE */
die obige CSS (Anmerkung: der Grad der Undurchsichtigkeit zu definieren Trübungswerte sind 0-100 für IE, 0-1 für andere Browser) erlaubt andere Elemente dahinter (z.B. ein Seitenhintergrundbild), um durchzulaufen, selbst wenn das Element mit der Deckkrafteinstellung einen farbigen Hintergrund hat.
Weitere Informationen zur Transparenz finden Sie unter RGBA (A = alpha), aber achten Sie auf die Unterstützung von variablen Browsern.
in IE, mein iframe geht transparent, aber die Sache ist ich in der Lage kippe auch meine Inhalte innerhalb des iframe zu sehen .. – Bharanikumar
Können Sie eine Beispielseite aufstellen? Wenn der Inhalt des Iframes völlig unsichtbar ist, dann würde ich (ohne zu sehen) Folgendes erraten: Es erhält nicht den Iframe-Inhalt, der Inhalt erbt eine andere CSS-Einstellung oder (offensichtlich, aber es lohnt sich zu überprüfen) seine Farbeigenschaft ist dieselbe wie die Hintergrundfarbe. Setzen Sie die Farbe auf Rot und entfernen Sie die Opazitätsregel - erscheint sie immer noch nicht? –
Erstens gibt es keine Transparenz wie "true", so dass das nicht funktioniert.
Zweitens, versuchen Sie, den Hintergrund transparent oder den gesamten Iframe transparent zu machen?
Die CSS-Deckkraft-Eigenschaft macht alles innerhalb eines Elements transparent. Die Deckkraft skaliert von 0 bis 1, wobei 0 vollständig durchsichtig ist, 0,5 halb transparent ist und 1 vollständig sichtbar ist.
Wenn Sie dies auf einem Div oder einem Iframe (oder irgendetwas) verwenden, werden der Hintergrund und der Text alle gleichermaßen verblasst.
Auf der anderen Seite kann in jedem modernen Browser der Hintergrund mit RGBA-Farbe teilweise transparent eingestellt werden. Sie sollten es tun, wie folgt:
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);
}
Die RGBA-Farbdefinition funktioniert genauso wie die Opazität Attribut (0 = klar, 1 = fest), außer es macht nur die spezifische Element, das Sie es auf transparent gesetzt und wirkt sich nicht auf die Elemente in diesem Element (dh es hat keinen Einfluss auf den Text in Ihrem iframe). Die ersten drei Zahlen sind die Rot-, Grün- und Blauwerte Ihrer Farbe auf einer Skala von 0 bis 255.
Wenn Sie eine bessere Cross-Browser-Lösung wünschen, empfehle ich jedoch, nur ein transparentes .png zu verwenden Datei als Hintergrundbild.Sie müssen dies auf IE testen, nicht sicher, ob es speziell für einen iframe funktioniert, aber Sie könnten keinen Hintergrund auf dem iframe setzen und dann das transparente Bild als Hintergrund der Seite setzen, die Sie innerhalb des iframe laden (wenden Sie es an) zum Körperelement für diese Seite).
Hoffe, das hilft!
das sind Änderungen, wie Sie oben Beispiel,
aber immer noch kein Update, in IE mein ifram ist weiß, aber die Site ist schwarz BG – BharanikumarKönnen Sie einen Link zu der Seite teilen, an der Sie gerade arbeiten, damit ich mir den gesamten Code ansehen kann? – Andrew
Es gibt einen Weg, dies mit jQuery tun können, wenn Sie die jQuery-Datei enthalten haben -
<!--[if lt IE 9]><script> $(".classname").attr("allowTransparency", "true"); </script><![endif]-->
ändern .classname zu dem Ihrer iframe oder machen, wenn es nicht ein. (Nehmen Sie das Attribut auch aus dem iframe heraus) Setzen Sie das direkt nach dem schließenden iframe-Tag und fügt das erforderliche allowTransparency-Tag für Browser vor IE9 hinzu. Wie es in der bedingten IE-Anweisung ist, wird es nicht vom W3C-Validator gelesen. Es eliminiert auch die Cross-Browser-Kompatibilität und das Verstecken von Inhalten mit dem Hinzufügen aller CSS, die bereits erwähnt wurden, wenn Sie die neueste jQuery-Version verwenden. Das allowTransparency-Attribut wurde mit einem klar definierten Zweck erstellt, sodass es keinen Sinn macht, es mit CSS neu zu erstellen, wenn Sie es nur im Hintergrund einfügen können. Hoffe das hilft jemandem!
(Diese Methode setzt voraus, dass bereits iframe {background-color:transparent} haben, die nicht auf älteren IE-Versionen funktioniert)
+1 für die tatsächliche Bereitstellung eines alternativen Wegs, der angefordert wurde. Ich habe es nicht wirklich versucht. –
Es ist nicht notwendig, jQuery hier einzubeziehen. Dies reicht aus: document.getElementById ("yourframeid"). AllowTransparency = true; – tomg
Zum Selbstzitat "** wenn ** du es installiert hast". Ich habe nicht gesagt, dass du es installieren musst, nur um das zu tun. Wenn Sie nicht haben, dann stimme ich zu, dass Ihr Weg besser wäre. –
Dieses Attribut ist möglicherweise nicht so weit verbreitet wie Sie denken, haben Sie gesehen, ob es tatsächlich das Verhalten in anderen Browsern als IE geändert hat? Soweit ich das beurteilen kann, ist dies ein IE-spezifisches Attribut und die anderen Browser verwenden standardmäßig Transparenz für Iframes und ignorieren dieses Attribut einfach. –
Lesen Sie meine Antwort. Die Antwort auf deine Frage ist schon da. –
@ james.garriss Ich lese Sie beantworten und Sie schreiben speziell, dass alle Browser das Attribut unterstützen, nicht seine Funktionalität. Nicht-Internet Explorer-Browser verhalten sich wie Internet Explorer (8 und darunter, anscheinend) verhält sich (wenn das Attribut dafür festgelegt ist), selbst wenn das Attribut nicht für sie festgelegt ist. Chrome scheint die DOM-Eigenschaft nicht zu unterstützen. Was genau unterstützt es Ihrer Meinung nach? – PhistucK