28172 sujets

CSS et mise en forme, CSS3

Bonjour,

Je n'arrive pas à appliquer le filtre AlphaImageLoader sur une div, ça m'affiche rien alors que le chemin d'accès est correct.

Voici le code :
background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../design/particuliers_cours_bourse.png", sizingMethod="scale"); 


Aucune idée d'où ça peut venir... Smiley sweatdrop
Modifié par Chok71 (17 May 2010 - 14:44)
Bonjour,
d'une part le chemin du filtre s'effectue à partir de la page appelante et non pas du fichier CSS dans lequel se trouve le filtre AlphaImageLoader donc mieux vaut utiliser chemin en absolu comme ceci '/design/particuliers_cours_bourse.png' (les simples quotes suffisent)
et d'autre part le bloc auquel tu ajoutes le background doit avoir le layout (via une hauteur ou une largeur spécifiée par exemple).
Modifié par Hermann (12 May 2010 - 21:11)
Bonjour,

IE6 étant à l'agonie, ne pas se prendre la tête avec le support de la transparence PNG dans ce dernier. (Du moins si le public visé est en Europe ou en Amérique du Nord.)

Pour un projet personnel, je recommande de ne pas se soucier une seconde d'IE6.
Pour une commande d'un client, on pourra se renseigner sur les méthodes de dégradation gracieuse pour la transparence PNG dans IE6 ici:
http://www.alsacreations.com/article/lire/81-transparence-png-ie6.html

Dans tous les cas je déconseille formellement d'utiliser le filtre DirectX AlphaImageLoader. Je déconseillerais bien l'usage de la propriété filter pour quelque effet que ce soit et toutes versions d'Internet Explorer confondues, mais je ne connais pas tous les filtres et leur dangerosité relative.
Bonjour,

@Hermann : J'ai bien mis un width et un height. J'ai aussi essayé en mettant l'image directement à la racine du dossier où sont les CSS (pour que le chemin soit juste "particuliers_cours_bourse.png").

@Florent V. : Je ne comprends pas pourquoi tu déconseilles l'utilisation de Filter alors que tu as écris un tutoriel dessus. Je vais essayer de voir pour le PNG 8 bit avec transparence Alpha, où encore la solution avec le script "DD_belatedPNG". Dans tous les cas je pourrais toujours mettre un gif à la place avec les commentaires conditionnels.

Merci. Smiley cligne
Chok71 a écrit :
@Florent V. : Je ne comprends pas pourquoi tu déconseilles l'utilisation de Filter alors que tu as écris un tutoriel dessus.

Si tu relis le tutoriel en question, je suis loin d'y conseiller l'utilisation du filtre AlphaImageLoader. Je commence par y présenter des solutions de dégradation gracieuse, et présente ensuite la solution AlphaImageLoader et ses inconvénients (je me cite: «Les limites de cette méthode», «Le filtre DirectX AlphaImageLoader a plusieurs effets secondaires», «l'utilisation du filtre AlphaImageLoader n'est pas neutre en termes de performances»).

Chok71 a écrit :
un gif

Un PNG8. Le format GIF est obsolète en dehors des images animées.
"Florent" a écrit :
Un PNG8. Le format GIF est obsolète en dehors des images animées.

Je n'ai pas Firework pour faire du PNG 8 compatible IE6, j'ai essayé avec Photoshop CS3 mais ça ne marche pas. Le gif gère la transparence sur IE6 donc ça résout un peu mon problème. Smiley smile
Modifié par Chok71 (17 May 2010 - 14:15)
Chok71 a écrit :
Je n'ai pas Firework pour faire du PNG 8 compatible IE6

Je parlais d'un PNG8 avec transparence binaire (le pixel est soit totalement transparent, soit opaque), comme le fait le GIF. En PNG8 (généré avec Photoshop, pourquoi pas) tu as exactement les mêmes fonctionnalités, mais une compression plus efficace des données,
Je n'ai pas Firework pour faire du PNG 8 compatible IE6, j'ai essayé avec Photoshop CS3 mais ça ne marche pas. Le gif gère la transparence sur IE6 donc ça résout un peu mce qui donne pour une image identique un poids plus faible en PNG.

Pour récapituler les principaux formats en PNG:
1. PNG8 (palette jusqu'à 256 couleurs) avec transparence binaire;
2. PNG8 (palette jusqu'à 256 couleurs) avec transparence graduelle (Fireworks, ImageAlpha, pngquant);
3. PNG32 (16 millions de couleurs, transparence graduelle).

Le premier est un équivalent fonctionnel du GIF (non animé), tout en étant optimisé pour produire des fichiers de petite taille.
Le deuxième n'est PAS compatible IE6, mais il s'affiche dans ce dernier d'une manière qui peut être intéressante (si on compose bien son image), et peut faire office de mécanisme de dégradation gracieuse. En dehors du cas IE6, on a aussi intérêt à utiliser ce format à la place d'un PNG32 quand c'est possible, pour réduire fortement le poids de l'image.
Le troisième format est bien connu: puissant mais lourd, la transparence n'est pas prise en compte par IE6 qui affiche un fond de couleur grise derrière l'image, ou bien la couleur de fond enregistrée en paramètre de l'image (bKGD chunk, qui peut faire un bon mécanisme de dégradation gracieuse pour IE6 aussi).
Merci pour ta réponse Smiley cligne , mais concernant ImageAlpha et pngquant je n'ai pas réussi à les faire marcher.