Bonjour,
J'ai un petit soucis avec des images en png dans mon ccs.
J'utilise, dans certaine class, des images png, cependant, avec IE, et bien le fond n'est pas vraiment transparent...
J'ai trouvé un topic sur le hub traitant du sujet, voir ici
cependant, cela ne fonctionne pas.
Ou alors, j'ai pas tout bien compris, ou tout bien fait....
Donc, si quelq'un a une solution valable, je suis preneur.
Merci.
Version complète: sur le forum Webmaster Hub : png et css
Webmaster Hub > Création et exploitation de Sites Internet > Les fondations d'un site > Le Webdesign
Il existe plusieurs solutions.
IE gère la transparence des PNG 8 bits (256 couleurs). Donc si c'est possible, convertis tes images dans ce mode, ce n'en sera que plus simple.
Si ton image utilise plus de couleurs et que la solution ci-dessus ne te convient pas et :
- Si elle est intégrée dans la page grace à une balise <img />, alors cette solution est à utiliser : http://homepage.ntlworld.com/bobosola/index.htm.
En résumé, télécharge ce fichier : http://homepage.ntlworld.com/bobosola/pngfix.js et appelle le dans ta page comme ça :
-Si elle est appellée dans ta feuille de style :
Si la première solution (pngfix.js) marche très bien avec les <img />, je n'ai par contre pas testé la seconde pour les images dans un CSS.
À toi de nous dire si ça fonctionne (mais à priori, oui)
Loupilo.
IE gère la transparence des PNG 8 bits (256 couleurs). Donc si c'est possible, convertis tes images dans ce mode, ce n'en sera que plus simple.
Si ton image utilise plus de couleurs et que la solution ci-dessus ne te convient pas et :
- Si elle est intégrée dans la page grace à une balise <img />, alors cette solution est à utiliser : http://homepage.ntlworld.com/bobosola/index.htm.
En résumé, télécharge ce fichier : http://homepage.ntlworld.com/bobosola/pngfix.js et appelle le dans ta page comme ça :
CODE
<!--[if gte IE 5.5000]>
<script type="text/javascript" src="pngfix.js"></script>
<![endif]-->
<script type="text/javascript" src="pngfix.js"></script>
<![endif]-->
-Si elle est appellée dans ta feuille de style :
CODE
.class {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='image.png'); // code propriétaire IE ignoré par les autres navigateurs
}
html > .class { // ce qui suit ne sera appliqué que sur les navigateurs autres qu'IE qui ne reconnaît pas cette formule
background-image:url('fond.png');
}
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='image.png'); // code propriétaire IE ignoré par les autres navigateurs
}
html > .class { // ce qui suit ne sera appliqué que sur les navigateurs autres qu'IE qui ne reconnaît pas cette formule
background-image:url('fond.png');
}
Si la première solution (pngfix.js) marche très bien avec les <img />, je n'ai par contre pas testé la seconde pour les images dans un CSS.
À toi de nous dire si ça fonctionne (mais à priori, oui)
Loupilo.
Yop....
Alors, j'avais deja mis en place le pngfix.js sur mon site de test.
Cela fonctionne très bien pour les images qui sont inclues dans la page via la balise <img>.
En revanche, cela ne marche absolument pas pour les png qui sont affichés via le css.
Je vais testé la seconde soluce que tu me propose pour le css, et je te tiens informé.
Merci à toi.
Alors, j'avais deja mis en place le pngfix.js sur mon site de test.
Cela fonctionne très bien pour les images qui sont inclues dans la page via la balise <img>.
En revanche, cela ne marche absolument pas pour les png qui sont affichés via le css.
Je vais testé la seconde soluce que tu me propose pour le css, et je te tiens informé.
Merci à toi.
Alors,
J'ai testé.
Pour FF, pas de problème. Comme d'habitude serais je tenté de dire.
Pour Ie, cela se gâte.
J'ai bien tenté de piger comment cela pouvait fonctionner cette histoire d'alphaloader, mais doit y avoir un truc que je ne fais pas correctement....
J'ai donc, temporairement, laché l'affaire.
J'y reveindrais dès que j'aurais un poil plus de temps.
J'ai testé.
Pour FF, pas de problème. Comme d'habitude serais je tenté de dire.
Pour Ie, cela se gâte.
J'ai bien tenté de piger comment cela pouvait fonctionner cette histoire d'alphaloader, mais doit y avoir un truc que je ne fais pas correctement....
J'ai donc, temporairement, laché l'affaire.
J'y reveindrais dès que j'aurais un poil plus de temps.
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.