Transparence PNG IE/Firefox (image dans le css)

[Sammuel]

Bonjour,

Je rencontre un problème pour rendre transparent des images PNG sous IE. Firefox gère parfaitement la transparence, mais pas IE...

J'ai effectué quelques recherches sur le net, et il y a différentes méthodes pour contourner le problème.

J'ai vu qu'il y avait une méthode pour les images inclus dans un fichier CSS, mais je n'ai pas réussi à la faire fonctionner...

Mon code css est :

dl {
background:url(bas.png) no-repeat bottom;
padding-bottom:11px;
margin:0 0 13px 0;
width:145px
}

dt {
background:url(haut.png) no-repeat bottom;
width:137px;
height:10px;
color:#000000;
padding:0 0 0 8px
}

dd {
background:url(case.png);
width:129px;
height:275px;
margin:0;
padding:0 8px 8px 8px;
color:#000000
}

Les 3 images haut/case/bas.png ont toutes un fond transparent. Sous IE, le fond est affiché en bleu. J'ai essayé en PNG 8 bits, mais le contour de l'image n'est pas précis/clair...

J'aurais aimer savoir si l'un d'entre vous avait trouvé une solution pour contourner ce genre de problème (lorsque les images sont incluses dans un fichier css), faire en sorte que la transparence fonctionne sur IE.

Si vraiment je ne trouve pas de solution, je vais utiliser le GIF

Merci !

[mamijo]

Oui j'utilise cette solution sur quelques pages depuis 2004 mais j'ai oublié le principe et où s'était expliqué

Le seul inconvénient est que le CSS n'est plus valide ...

En attendant que je retrouve ma source voici le code que tu pourrais essayer pour le fond de dl :

/* Spécifique IE5.5 et IE6 */
dl {
 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', src='images/bas.png', sizingMethod='scale')
}

div.bidule>dl { background: url(images/bas.png) no-repeat bottom;}

avec bidule parent de dl

[mamijo]

un détail important : cela gère la transparence PARTIELLE ce que tu ne peux pas faire avec un gif....

Mes pages où ça marche : "questions de fond" dans le texte du site de mon profil

[Sammuel]

C'est cette méthode que j'ai essayé, et je n'ai pas réussi à la faire fonctionner .

Sous Firefox, l'image du bas (bas.png) s'affiche bien, mais sous IE, rien ne s'affiche.

Je suis en train de me renseigner sur google au sujet de :

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='scale');

Sinon, le fait que le CSS ne soit pas valide, ce n'est pas grave du moment que la page l'est . Et puis apparemment, ca à l'air d'être la seul solution pour les images issues du CSS, donc...

[Régis]

Je rencontre un problème pour rendre transparent des images PNG sous IE. Firefox gère parfaitement la transparence, mais pas IE... (...)

Bonjour, je ne sais pas si cela peu aidé mais MicroSoft en parle là : Les fichiers PNG n'affichent pas les zones transparentes dans Internet Explorer

[Sammuel]

Oui c'est la méthode que mamijo à décrite plus haut.

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='scale');

[tom_sawyer]

Moi j'utilise cela :

http://homepage.ntlworld.com/bobosola/pngtestfixed.htm

Bon courage

[Sammuel]

Moi j'utilise cela :

http://homepage.ntlworld.com/bobosola/pngtestfixed.htm

Cela ne va pas m'aider sachant que les images se trouve dans la feuille de style et pas dans la page en elle même.

[mamijo]

ça marche pourtant,... Est-ce que les PNG sont bien 24 bits ou 32 bits ?

Ce qui serait bien ce serait de les avoir (ou un autre codé de la même façon)

J'ai retrouvé une autre mèthode ici qui fonctionnait aussi mais uniquement sur serveur (pas en local) et c'est la raison pour laquelle j'ai préféré la première je crois...

edit : ma source de la première solution

Modifié 8 Juin 2006 par mamijo

[Régis]

Je me souvenais d'avoir lu sur le HUB des posts au sujet de la transparence des png et de IE... avec la fonction "recherche" du HUB, j'ai trouvé, par exemple, ceci :

• PNG : transparence IE/FF, transparence, PNG, CSS... et IE
  
• Gérer la transparence avec CSS
  
• Image PNG transparent
  
• ...
  

Peut-être, pourrez vous y trouver une réponse...

[Sammuel]

mamijo > C'est bon, ta technique fonctionne bien J'avais oublié de préciser le dossier de l'image...

dt {
background:url(haut.png) no-repeat bottom;
width:137px;
height:10px;
color:#000000;
padding:0 0 0 8px
}

/* N'est lu que par IE grâce à *html */
*html dt { 
background-image:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='index_fichiers/haut.png', sizingMethod='scale');
}

Il fallait que je reprécise "index_fichiers" dans "src='index_fichiers/haut.png', sizingMethod='scale'"

Donc maintenant, ca fonctionne très bien pour les images case.png et haut.png. Par contre, ça bug avec l'image bas.png.

Je ne peux pas utiliser cette méthode pour l'image bas.png, car l'image bas.png se retrouve sur l'image haut.png au lieu d'être tout en bas

Je vais essayer de faire en sorte qu'elle soit à sa place

Modifié 8 Juin 2006 par Sammuel

[mamijo]

le 3ième lien donné par gatweb est bourré de bons conseils et m'a permis de voir des pages de sarc qui utilisent la deuxième solution, c'est top

[Sammuel]

oki, merci à tous ! Je vais aller jetter un coup d'oeil au 3ème lien

arf dommage qu'il y est un petit bug (sous IE)... je vais tacher de le contourner

[mamijo]

nos posts se sont croisé...

Justement Sarc fait plusieurs superpositions dans ses pages pitimonde là