Webmaster Hub > Transparence PNG IE/Firefox (image dans le css)

Version complète: sur le forum Webmaster Hub : Transparence PNG IE/Firefox (image dans le css)

Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS

Sammuel

jeudi 8 juin 2006 à 12:53

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 :

CODE

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

jeudi 8 juin 2006 à 13:27

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 :

CODE

/* 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

jeudi 8 juin 2006 à 13:44

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

jeudi 8 juin 2006 à 14:16

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

jeudi 8 juin 2006 à 14:20

CITATION(Sammuel @ jeudi 8 juin 2006, 13h53)

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

jeudi 8 juin 2006 à 14:21

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

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

tom_sawyer

jeudi 8 juin 2006 à 14:29

Moi j'utilise cela :
http://homepage.ntlworld.com/bobosola/pngtestfixed.htm

Bon courage

Sammuel

jeudi 8 juin 2006 à 14:32

CITATION(tom_sawyer @ jeudi 8 juin 2006, 15h29)

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

jeudi 8 juin 2006 à 14:33

ç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

Régis

jeudi 8 juin 2006 à 14:37

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 :

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

Sammuel

jeudi 8 juin 2006 à 14:43

mamijo > C'est bon, ta technique fonctionne bien

J'avais oublié de préciser le dossier de l'image...

CODE

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

mamijo

jeudi 8 juin 2006 à 14:46

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

jeudi 8 juin 2006 à 14:49

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

jeudi 8 juin 2006 à 14:49

nos posts se sont croisé...

Justement Sarc fait plusieurs superpositions dans ses pages pitimonde là

Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.