Devrais-je utiliser la transparence PNG ou la transparence CSS?Quel est le supérieur, la transparence CSS ou la transparence PNG?
Mon premier instinct est d'aller avec CSS. Cependant j'ai entendu quelque part que le filtre dans IE est lent et que j'obtiendrais de meilleurs résultats avec PNG (ignorant IE6).
Cependant, par expérience personnelle, je sais que la transparence PNG est lente dans FF3.
Y a-t-il une réponse définitive à cette question?
Merci.
Ce sont deux solutions différentes à deux problèmes différents. La transparence CSS (je suppose que vous faites référence à la propriété opacité) rendra transparent un élément entier (sa bordure, son arrière-plan et son contenu) alors que la transparence alpha PNG n'est utile que dans les situations où vous utiliseriez des images .
Je ne peux pas penser à de nombreuses situations où vous pourriez utiliser le même effet.
Il existe bien sûr RGBA colours in CSS3, mais la prise en charge des navigateurs est actuellement trop faible pour être une option viable dans les sites/applications publics.
P.S. Je ne peux pas dire que j'ai rencontré des problèmes de performance de FF3 alpha PNG moi-même.
Suivi de commentaire:
OK. Dans ce cas, j'irais pour la propriété d'opacité CSS.
Bien que les performances des filtres ne soient pas optimales dans IE6, cela signifie que vous n'avez pas à gaspiller de bande passante ni de requête HTTP supplémentaire sur une image. De plus, si vous vouliez que l'image fonctionne dans IE6, vous devriez utiliser AlphaImageLoader, qui, je suis sûr, serait aussi lent (sinon plus lent) que le filtre alpha.
Je place une superposition transparente sur certains éléments, et dans ce cas, le réglage de l'image de fond de l'élément de superposition ou du paramètre d'opacité fonctionnera. Ma question se rapporte à la vitesse de l'une ou l'autre solution dans la plupart des navigateurs. Merci. –
Répondre en réponse (était trop long). –
La vitesse dont je parle est la vitesse de rendu, pas la vitesse de chargement, ce qui dans ma situation est beaucoup moins important. Lors du défilement ou de l'affichage (IE, en utilisant JS pour masquer/afficher), est-il vrai que le format PNG fonctionne mieux que le filtre d'opacité dans IE7. Si je devais, j'utiliserais un css différent pour la classe pour IE/FF. –
La transparence PNG peut faire ce que CSS ne peut pas faire - La transparence du canal alpha PNG peut avoir différents degrés de transparence partielle pour différentes parties de l'image, alors que l'opacité CSS ne peut pas le faire.
Eh bien ... vous * pourriez * utiliser des dégradés CSS (éventuellement avec '-webkit-mask') –
Je viens de faire un test non scientifique rapide dans Firefox 3.0.11 sur le mac.
Mon test consistait à superposer un div et à le faire défiler de haut en bas de façon répétée.
Une occasion css:
background: #000; opacity:0.8;
L'autre a utilisé une 24bits 10px PNG du même.
j'ai mesuré les résultats suivants avec moniteur d'activité (donc deviner, pas exact)
Firefox 3.0.11
opacité CSS: environ 60% de l'utilisation cpu. PNG: environ 20% d'utilisation du processeur.
Safari 4.0:
opacité CSS: environ 80% (avec des pics de 120%!)
PNG: environ 76% (sans pics à tous)
Pour autant que la performance va, il semble que un PNG est le gagnant.
' Donc, en ce qui concerne les performances, il semble qu'un PNG est le gagnant. Sur le Mac, au moins. Avez-vous testé sur Windows? – Moshe
Peut-être que je réponds un peu en retard mais je pense que c'est assez évident, que la performance sera meilleure avec un png - si vous le mesurez en CPU. Mais je pense que le problème de performance principal est la taille img. Puisque vous pouvez sécuriser beaucoup d'octets en utilisant .jpg, je pense qu'il vaut mieux opacifier/rgba dans la plupart des cas. – davedadizzel
Bien que CSS soit probablement la "bonne" façon de procéder, je pense que le format PNG est plus sûr, plus facile et mieux implémenté.
il y a MEMORY LEAKS dans IE (y compris 8) lors de l'utilisation png 24 bits! s'il vous plaît faites attention.
J'utilisé PNGs avec certains jquery glisser un texte et le script est mort lente! J'ai supprimé les png d'arrière-plan et le script va bien.
+1 pour le lien. – Moshe
Cette question * vraiment * a besoin de contexte. Et pour poser une question spécifique. –