Soll ich PNG-Transparenz oder CSS-Transparenz verwenden?Was ist besser, CSS-Transparenz oder PNG-Transparenz?
Mein erster Instinkt ist, mit CSS zu gehen. Allerdings habe ich irgendwo gehört, dass der Filter in IE langsam ist und dass ich bessere Ergebnisse mit PNG bekommen würde (IE6 ignorierend).
Aber aus eigener Erfahrung weiß ich, dass PNG Transparenz in FF3 langsam ist.
Gibt es eine eindeutige Antwort darauf?
Danke.
Sie sind zwei verschiedene Lösungen für zwei verschiedene Probleme. CSS-Transparenz (ich nehme an, Sie beziehen sich auf die Opazitätseigenschaft) macht ein gesamtes Element (dessen Rahmen, Hintergrund und Inhalt) transparent, wohingegen Alpha-PNG-Transparenz nur in Situationen nützlich ist, in denen Sie Bilder verwenden, beispielsweise einen Elementhintergrund .
Ich kann nicht an viele Situationen denken, in denen Sie entweder den gleichen Effekt verwenden könnten.
Es gibt natürlich RGBA colours in CSS3, aber Browser-Unterstützung ist derzeit zu niedrig, um eine praktikable Option in öffentlichen Seiten/Anwendungen zu sein.
P.S. Ich kann nicht sagen, dass ich selbst auf Probleme mit der Alpha-PNG-Leistung von FF3 gestoßen bin.
Follow-up-Kommentar:
OK. In diesem Fall würde ich nach der CSS-Deckkrafteigenschaft suchen.
Obwohl die Filterleistung in IE6 möglicherweise nicht optimal ist, bedeutet dies, dass Sie keine Bandbreite und eine zusätzliche HTTP-Anforderung für ein Image verschwenden müssen. Wenn Sie das Bild auch in IE6 verwenden möchten, müssen Sie AlphaImageLoader verwenden, was sicher genauso langsam (wenn nicht langsamer) ist als der Alpha-Filter.
Ich übergebe einigen Elementen eine transparente Überlagerung, und in diesem Fall funktioniert die Einstellung des Hintergrundbildes oder der Deckkraft des Überlagerungselements. Meine Frage bezieht sich auf die Geschwindigkeit der beiden Lösungen in den meisten Browsern. Danke. –
Antwort in Antwort (war zu lang). –
Die Geschwindigkeit, über die ich spreche, ist die Rendergeschwindigkeit, nicht die Ladegeschwindigkeit, die in meiner Situation viel weniger wichtig ist. Beim Scrollen oder Anzeigen (IE, mit JS zum Ausblenden/Anzeigen) stimmt es, dass PNG in IE7 besser ist als der Opazitätsfilter. Wenn ich müsste, würde ich eine andere CSS für die Klasse für IE/FF verwenden. –
PNG-Transparenz kann Dinge tun, die CSS nicht kann - PNG-Alphakanal-Transparenz kann unterschiedliche Grade an Teiltransparenz für verschiedene Teile des Bildes haben, während CSS-Deckkraft das nicht kann.
Nun ... Sie * könnten * CSS-Gradienten verwenden (möglicherweise neben '-webkit-mask') –
Ich habe gerade einen schnellen nicht-wissenschaftlichen Test in Firefox 3.0.11 auf dem Mac gemacht.
Mein Test bestand darin, ein div zu überlagern und wiederholt nach oben und unten zu scrollen.
One verwendete CSS:
background: #000; opacity:0.8;
der andere ein 10px 24bit PNG desselben verwendet.
Ich maß die folgenden Ergebnisse mit Activity Monitor (so raten, nicht exakt)
Firefox 3.0.11
CSS Opazität: ca. 60% CPU-Auslastung.
PNG: ca. 20% CPU-Nutzung.
Safari 4.0:
CSS Opazität: ca. 80% (mit Spitzenwerten von 120%!)
PNG: ca. 76% (ohne Peaks überhaupt)
So so weit wie Leistung geht, wie es scheint Ein PNG ist der Gewinner.
' So weit wie die Leistung geht, scheint es, als ob ein PNG der Gewinner ist. Auf dem Mac zumindest. Hast du unter Windows getestet? – Moshe
Vielleicht antworte ich ein bisschen spät, aber ich denke, es ist ziemlich offensichtlich, dass die Leistung mit einem Png besser sein wird - wenn Sie es in CPU messen. Aber ich denke, das Hauptperformance-Problem ist die IMG-Größe. Da Sie mit .jpg viele Bytes speichern können, ist es besser, in den meisten Fällen mit opacity/rgba zu arbeiten. – davedadizzel
Obwohl CSS wahrscheinlich der "richtige" Weg ist, denke ich, dass PNG sicherer, einfacher und besser implementiert ist.
Es gibt MEMORY LEAKS in IE (einschließlich 8) bei der Verwendung von Png 24 Bit! bitte pass auf.
habe ich pngs mit einigen jquery etwas Text und das Skript zu gleiten ist tot langsam! Ich habe Hintergrund-PNGs entfernt und das Skript ist in Ordnung.
+1 für den Link. – Moshe
Diese Frage * wirklich * braucht Kontext. Und um eine spezifische Frage zu stellen. –