Frage Es gibt kein Attribut "allowtransparency"


Ich suche nach alternativen Möglichkeiten:

<iframe transparency=true   ...

Wenn ich die W3C-Validierung mache, bekomme ich den Fehler:

Column 31: there is no attribute "allowtransparency"

Wenn Sie dieses CSS verwenden,

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

Für den obigen Ausschnitt bekomme ich einen leeren iframe.


31
2017-09-18 06:58


Ursprung


Antworten:


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 HTML5 hat uns gelehrt, der Wagen soll vor dem Pferd sein.

Angenommen, Sie haben diesen HTML-Code auf Ihrer Hauptseite index.html:

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

Und deine source.html sieht so 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 Hauptseite (index.html) in Ihrem Browser öffnen, sehen Sie den Text von source.html in einem iframe, aber er hat einen hellgrünen Hintergrund.

(Getestet mit Safari, Firefox und Chrome unter Mac OS X und Internet Explorer 8 und Chrome unter Windows XP)

Bearbeiten: Der Schlüssel ist dies: Die Quellseite kann keinen eigenen Hintergrund festlegen. Wenn dies der Fall ist, ignoriert es den transparenten Hintergrund.


31
2018-03-03 14:41



Ich bin mir nicht sicher, was Sie hier versuchen, aber das sollte das sein, wonach Sie suchen:

iframe {
    background-color: transparent;
}

Das setzt natürlich voraus, dass Sie den Hintergrund zum iframe transparent sein.


12
2017-09-18 07:52



Es gibt eine Möglichkeit, dies mit jQuery zu tun, wenn Sie die jQuery-Datei eingefügt haben -

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

Ändern Sie den .classname in den Ihres iframes oder erstellen Sie einen, wenn es keinen gibt. (Entferne das Attribut auch aus dem iframe) 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 geht davon aus, dass Sie bereitsiframe {background-color:transparent}was bei älteren IE-Versionen nicht funktioniert)


4
2017-09-29 23:30



Erstens gibt es keine Transparenz wie "wahr", das wird nicht funktionieren.

Zweitens, versuchen Sie, den Hintergrund transparent oder den gesamten Iframe transparent zu machen?

Die Eigenschaft "CSS-Deckkraft" sorgt dafür, dass alles innerhalb des Elements, in dem Sie es verwenden, transparent ist. 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 können Sie in jedem modernen Browser den Hintergrund mit RGBA-Farbe teilweise transparent gestalten. Du solltest es so machen:

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 genau wie das Opazitätsattribut (0 = clear, 1 = solid), nur dass das spezifische Element, das Sie festgelegt haben, transparent ist und die Elemente in diesem Element nicht beeinflusst (dh es wirkt sich nicht auf den darin enthaltenen Text aus) Ihr iframe). Die ersten drei Zahlen sind die Rot-, Grün- und Blauwerte Ihrer Farbe auf einer Skala von 0 bis 255.

Wenn Sie jedoch eine bessere browserübergreifende Lösung wünschen, empfehle ich Ihnen, eine transparente PNG-Datei als Hintergrundbild zu verwenden. 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!


1
2017-09-19 05:05



  1. Es ist kein HTML-Attribut benannt transparency, also wirst du immer bekomme einen Fehler mit iframe transparency=true

  2. Wenn Sie die Deckkraft auf Null setzen, wird das Element überhaupt nicht angezeigt. Sie müssen den Deckkraftgrad definieren:

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

Das obige CSS (Anmerkung: Opazitätswerte sind 0-100 für IE, 0-1 für andere Browser) lässt andere Elemente dahinter (z. B. ein Seitenhintergrundbild) durchscheinen, 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.


1
2017-09-18 08:34