Transparence PNG sous IE6

**molesqualeux** · 12/10/2009, 00h31

Bonjour ,
sous cette page , mes css marchent bien avec FF et IE > 6 .
Par contre pour IE 6 qui est ma version de IE sur ma machine , l'image a un fond un peu dégueulasse.

Savez vous pourquoi? merci.
http://www.intevit.com/summer2010

**sebhm** · 12/10/2009, 10h18

Bonjour,

le probleme est la gestion de la transparence PNG.
IE6 a du mal (comme sur beaucoup d'autres points...)

j'ai mis un peu de temps... j'ai scotché sur ton image une minute ou deux ....

**molesqualeux** · 12/10/2009, 11h00

lol merci je vais regarder ça.
Tu t'es pas inscrit en tout cas ^^

**tzilliox** · 12/10/2009, 11h39

Salut molesqualeux !

Pour tous tes problèmes avec IE6, je te conseille ce site qui liste les bugs / les fix d'IE6.
Par exemple, pour les problèmes de transparence de PNG, voici les solutions

Bon courage,
Thomas.

**molesqualeux** · 12/10/2009, 12h52

J'arrive pas à avoir l'option activé quand j'enregistre sous Flattened .

The simplest solution is to save your image as a PNG8 file with Alpha Transparency enabled. If you're using Adobe Fireworks, you can do this by clicking Save As > Save as type > Flattened PNG > Options > Alpha Transparency. If you're using any type of gradient, you can select the Dither checkbox to get a slightly better quality gradient. Saving as a PNG8 with Alpha Transparency will only render semi-transparent areas of the images as 100% transparent; there are no varied

**Macmillenium** · 12/10/2009, 12h58

Envoyé par sebhm

(j'ai pas trouvé d'article qui en parle sur Developpez.com)

La FAQ CSS en parle

http://css.developpez.com/faq/?page=...ansparence_png

**sebhm** · 12/10/2009, 15h50

ah désolé.

un grand 'ouhhh' à

qui ne m'a pas dit ca (en premiere page) sur la requete 'transparence png site:developpez.com'

**molesqualeux** · 12/10/2009, 17h51

Re,
Voici mon css que j'ai modifié suite aux recommendations de la FAQ de developpez sur les css :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
.img-png { 
	background:none; /* Si un autre background est attribué */
	zoom:1; /* Si l'élément n'a pas le Layout */
	position:relative; /* pour rendre les liens et les champs cliquable */
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='usa_trip3.png');
}

Bon elle serait sensée marcher seulement si j'ai usa_trip3.png d'afficher ce qui arrive en moyenne une fois sur trois.
Mais quand ça se passe , j'ai toujours l'effet gris/blanc derrière.

Voici l'url du css.
J'a remarqué sur sous IE 6 , lorsque je fais clik droit enregistrer le css , j'ai des caractères illisibles ce qui me laisse à penser que le souci vient de là mais je ne suis pas sûr.
Pouvez-vous répéter la procédure? merci.
http://www.intevit.com/summer2010/style_ie.css

**tzilliox** · 12/10/2009, 18h15

Salut molesqualeux !

C'est normal que ça ne fonctionne pas, car tu as toujours <img> pour inclure ton image. Et cette image n'est pas transparente.

Il faudrait que tu enlève ta balise img pour ne laisser que l'image par background sur ton div

Bon courage,
Thomas.

**molesqualeux** · 12/10/2009, 18h41

Je viens de corriger quelque chose.
Je me suis dis que .nom {} décrivait une classe.
Et oui thomas , tu as raison je ne l'ai pas appliqué .
Je l'ai donc incluse comme ceci :

<img class="img-png" src="usatrip<?php echo rand(1,3); ?>.png" alt="usa summer 2010" /> Mais j'ai toujours le meme souci... pour la transparence. ai-je fais le bon changement? merci!

**tzilliox** · 12/10/2009, 19h07

Re molesqualeux !

non ça ne suffit pas.
Dans ta balise img, tu as l'image sans transparence qui recouvre l'image de fond avec transparence. Je pense, qu'il faudrait que tu remplaces la balise <img> par une balise <div>. Et que tu rajoutes dans ton CSS la largeur et la hauteur de .img-png.

Il faudrait aussi que tu fasse 3 classes pour tes 3 images

Bonne soirée,
Thomas.

**molesqualeux** · 12/10/2009, 20h46

Ok merci , ca marche désormais soue IE 6 avec :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
.img-png { 
	background:none; /* Si un autre background est attribué */
	zoom:1; /* Si l'élément n'a pas le Layout */
	position:relative; /* pour rendre les liens et les champs cliquable */
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='usatrip3.png');
}

et dans le code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div class="img-png"> </div>

Maintenant , pour gérer FF aussi, j'ai donc fait comme ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<!--[if IE]>
			<div class="img-png<?php echo rand(1,3); ?>"> </div>
		<![endif]-->
		<!--[if !IE]> <-->
		    <img class="img-png" src="usatrip<?php echo rand(1,3); ?>.png" alt="usa summer 2010" />
		<!--> <![endif]-->

Ca marche bien.

Maintenant, cerise sur le gâteau, j'aimerais ajouter le nuage avec fond transparent png sous IE 6.

Pour le moment c'est géré comme ça

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
body {
	background-color:#0a191f;
	background-repeat:no-repeat;
	background-position: top left;
	text-align: center;
	background-image:url(bg_clouds.png);
	
}

Mais ca plante forcément.
Comment appliquer la technologie microsoft sur ce png aussi?
merci!

**tzilliox** · 13/10/2009, 10h53

Salut molesqualeux !

Tu peux essayer comme ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
body {
	background-color:#0a191f;
	background-repeat:no-repeat;
	background-position: top left;
	text-align: center;
	background-image:url(bg_clouds.png);
	!background:none; /* On enlève le background pour IE */
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='usatrip3.png');
}

Dis-moi si ça te convient

Bonne journée,
Thomas.

**molesqualeux** · 13/10/2009, 11h04

Bon idée thomas maintenant sous IE je n'ai pu de fond bleu nuit .
http://www.intevit.com/summer2010/

**tzilliox** · 13/10/2009, 11h22

Re molesqualeux !

C'est normal. C'est parce que je t'ai dit des bétises

Je pense qu'il faut faire background-image:none au lieu de background:none.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
body {
	background-color:#0a191f;
	background-repeat:no-repeat;
	background-position: top left;
	text-align: center;
	background-image:url(bg_clouds.png);
	!background-image:none; /* On enlève le background pour IE */
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg_clouds.png');
}

Bonne chance,
Thomas.

**molesqualeux** · 13/10/2009, 11h30

génial ça fonctionne.
Une dernière question : pourquoi mes images font 1mo? C'est logique quand on met le fond transparent d'avoir dses images si lourdes?
Quand j'étais plus jeune j'utilisais un logiciel pour amoindrir la qualité au profit de la taille. C'est possible avec les png , si oui quel logiciel merci encore!!

**tzilliox** · 13/10/2009, 13h21

Re molesqualeux !

Il faut dire que tes images sont assez grandes quand-même.
Je ne suis pas spécialiste en traitement d'image, mais certains logiciel "avançé" permettent de choisir le niveau de qualité de l'image à l'enregistrement.

Bon courage,
Thomas.

Transparence PNG sous IE6

CSS

Discussions similaires

Partager

Partager