[résolu]Transparence des PNG avec IE et FF

Bonjour à tous !
Je n'arrive pas à mettre les codes que j'ai trouvé sur votre site pour que IE affiche la transparence.

J'ai un fond avec dessins dans le body et j'ai un conteneur dans lequel j'ai mis une image (qui est en fait le fond rose en opacité 50% sans dessins que j'ai crée sous photoshop) je l'ai enregistré au format PNG et sous FF ca marche très bien mais pas avec IE et je cherche une solution mais il y en beaucoup et je n' y arrive pas.

Pouvez-vous m'aider svp ?

Merci d'avance !

J'espère que je suis dans le bon forum !


Modifié par casey (18 Oct 2007 - 15:50)

Pour la transparence d'un calque fond blanc, opacité 50%:

.pulltrans {
	background:white;
	filter:alpha(opacity=50);
	-moz-opacity:.50;
	opacity:.50;
}

En revanche, tous les éléments du DIV hériteront de cette opacité.
Je cherche. Quelqu'un a une piste ?

Ah ouais: http://forum.alsacreations.com/topic.php?fid=2&tid=29862&s=transparence[/url]
Modifié par CyrilK (16 Oct 2007 - 14:24)

merci j'ai déjà tester et oui tout les div recoivent l'opacité !
Je cherche encore ...

Bonjour,

ça ça marche :

http://forum.alsacreations.com/topic-4-29862-1-Une-solution-pour-la-transparence-des-bloc-en-CSS2.html


La preuve : http://www.venus-ondine.com/securite.htm


Basille

casey a écrit :
merci j'ai déjà tester et oui tout les div recoivent l'opacité !
Je cherche encore ...

Mais si, ça marche, j'te jure...

Basille

Merci j'avais déjà envisager de le faire mais je trouve contraignant de mettre des div dans div qui eux-meme en contiennent déjà ! Et toutes les autres solutions (javascripte ou CSS) me paraissent passablement adaptable sauf que pour l'insant j'y arrive pas et que à force d'essayer je perd la boule ! Mais mais... j'y tiens c'est tellement zooli avec le fond transparent tu vois c'est comme tes piscines c'est transparent !

Basille a écrit :
La preuve : http://www.venus-ondine.com/securite.htm

Un agrandissement de texte, et tout fout le camp. C'est vraiment une solution restrictive, alors que pour un fond uni translucide il suffit de faire appliquer la transparence PNG sous IE6, via les filtres AlphaImageLoader qui vont bien.

Pour une image de fond unie (dans l'idéal, on utiliserait une couleur RVBA, mais bon, comme seuls Safari 3 et Firefox 3 supportent les couleurs RVBA spécifiées dans CSS3, on a encore le temps):

<!--[if lte IE 6]>
<style type="text/css" media="screen">
#machin {
background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale, src='/chemin/vers/mon-image.png');
}
</style>
<![ endif ]-->

(Note: pas d'espaces dans le [ endif ], je l'écris ainsi à cause d'une limitation du forum.)
Un peu de documentation: http://msdn2.microsoft.com/en-us/library/ms532969.aspx
On notera en particulier qu'il faut que le chemin donné pour l'image parte soit de la racine du serveur (le «/» au début de l'URL dans l'exemple ci-dessus), soit depuis la page HTML... et pas depuis la feuille de styles!

Edit: autant pour moi, il y a un autre point important: l'élément pour lequel on utilise AlphaImageLoader doit avoir le layout, sinon ça ne prend pas. Et vu que le HasLayout peut causer des problèmes, au final c'est pas très évident à mettre en place...

Si on veut un peu automatiser tout ça via Javascript, il y a des scripts tout prêts:
http://www.twinhelix.com/css/iepngfix/
Modifié par Florent V. (17 Oct 2007 - 16:48)

Florent V. a écrit :

Un agrandissement de texte, et tout fout le camp.

Oui, c'est vrai, c'est d'ailleurs ce que j'ai précisé dans l'explication. C'est contraignant.


Merci pour les infos sur les png. C'est un format que je n'utilise jamais, mais il semble finalement intéressant, surtout si on peut redre tout cela compatible...

Basille
Modifié par Basille (17 Oct 2007 - 17:16)

Salut,

Pour moi, je dégrade via des commentaires conditionnels dans le code les png en gif pour ie6 et<, c'est moins zoli mais plus fiable ...

À propos d'AlphaImageLoader, c'est tout chaud publié dans la FAQ:
Obtenir la transparence PNG avec Internet Explorer 6

il manque peut-être une petite précision dans cette faq, comme dans la pluspart des articles sur le sujet il est dit : "on ne peut pas utiliser background-repeat" c'est vrai, mais il faut dire aussi que dans certaine condition on peut simuler background-repeat.

L'utilisation typique du png transparent c'est la petite image sur le bord d'un block pour faire une petite ombre quelque soit le fond. Pour cela à moins de mettre une image de 5000 px c'est dificile sans background-repeat. Mais si l'on fait une image png avec notre background de 20px de haut et la largeur de notre block, la proprieté "scale" déforme l'image sur toute la hauteur ce qui donne le même résultat que "background-repeat". Bien sur il faut connaitre la limite c'est a dire que c'est uniquement pour des images déformables (c'est à dire pas de motifs).

Ce code doit aller dans la page html si j'ai bien compris et
et qu'est-ce un layout, et un haslayout , svp et comment cele se place t'il ? et si j'ai d'autres parametres dans "machin" je peux les rajouter ?

Merci


<!--[if lte IE 6]>

<style type="text/css" media="screen">

#machin {

background: none;

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale, src='/chemin/vers/mon-image.png');

}

</style>

<![ endif ]-->

casey a écrit :
Ce code doit aller dans la page html si j'ai bien compris

À vrai dire, la propriété filter est du CSS, et donc peut très bien être placée directement dans la feuille de styles. Sauf qu'elle s'appliquera alors également pour IE7, qui a un support natif de la transparence PNG (ce dont on aimerait bien profiter sans interférences). Donc on utilise un commentaire conditionnel (qui est un commentaire HTML standard, avec à l'intérieur une syntaxe spéciale qui fait qu'il sera lui par IE) pour viser IE6 et inférieurs uniquement.

Comme ce commentaire conditionnel doit être dans le code HTML, il faut le mettre dans le head (de préférence à la fin) et:
- soit y placer un élément style avec directement les correctifs CSS qui vont bien;
- soit faire un appel (via style ou link) à une feuille de style externes qui contiendra ces correctifs CSS.

casey a écrit :
et qu'est-ce un layout, et un haslayout , svp et comment cele se place t'il ?

Toi, tu n'as pas lu la FAQ...

casey a écrit :
et si j'ai d'autres parametres dans "machin" je peux les rajouter ?

Tu commences à définir les styles normaux dans ta feuille de style. Puis, via le commentaire conditionnel, tu adresses à IE6 et inférieurs des correctifs CSS, et uniquement des correctifs. Tu as besoin:
- d'annuler le background s'il y en a un;
- d'utiliser une propriété qui confère le layout (par exemple un height: 1%) s'il n'y en a pas déjà dans la feuille de style standard;
- de rajouter la propriété filter qui va bien;
- et normalement c'est tout.
Modifié par Florent V. (17 Oct 2007 - 22:09)

Merci pour ces excellentes explications sur le site d'Alsacretions j'ai pu mettre en place le commentaire conditionel et ca fonctionne dans IE mais je dois supprimer l'image couleur du fond transparent dans le CSS et naturellement elle n'apparaît plus dans FF !

casey a écrit :
mais je dois supprimer l'image couleur du fond transparent dans le CSS

Non: tu dois la supprimer dans les correctifs CSS adressés à IE 6 et inférieurs, et uniquement dans ces correctifs.

Si ça n'est pas clair, se référer à l'entrée «Commentaires conditionnels» de la FAQ du forum.

Bonjour Florent,

J'ai mis en place la solution que tu m'a proposé et malgré toute les lectures que j'ai faites sur les FAQ et Layout et Haslayout (merci) j'ai quand même un problème d'affichage il doit y avoir une bête erreur à qqpart dans mon code.

Voici le code pour plus de clarté:

<!--[if lte IE 6]>
<style type="text/css">
#conteneur{
height: 1%; /* HasLayout */
background: none; /* Il supprime l'image de fond s'il y en a une de déclarée dans la feuille de styles principale */
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="./image/fondtransp.png", sizingMethod="scale");
}
</style>
<![endif]-->

div#conteneur
{
	width:630px ;
	margin: auto ;
	text-align: left ;
	border-top: 1px solid #d15373 ;
	border-bottom:  1px dotted #d15373 ;
	background: url(../image/fondtransp.png);
}

Il se peut que ce soit l'adressage dans la page mais j'ai mis l'image aussi à la racine et voilà ca ne fonctionne pas ! Ca ne fonctionne que si je supprime l'image qui est dans le conteneur du CSS et naturellement ce n'est pas la solution !

Bonjour,

1. Pas besoin de height: 1% dans les correctifs pour IE6 et inférieurs, vu que tu as déjà un width: 630px, ce qui confère déjà le layout au bloc (relire l'item de la FAQ sur le HasLayout...).

2. Il faut bien entendu que les styles correctifs pour IE6 soient lu après les styles normaux, pour qu'ils puissent remplacer certains de ces styles normaux.

3. Tu as un problème de priorité des sélecteurs. Le sélecteur div#conteneur a une priorité de 0101, tandis que le le sélecteur #conteneur a une priorité de 0100, soit une priorité inférieure.
Lire: http://openweb.eu.org/articles/cascade_css/
Les styles qu'IE6 appliquera pour cet élément seront donc les suivants:

width:630px ;
margin: auto ;
text-align: left ;
border-top: 1px solid #d15373 ;
border-bottom:  1px dotted #d15373 ;
background: url(../image/fondtransp.png);
height: 1%; /* HasLayout */
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="./image/fondtransp.png", sizingMethod="scale");
}

Bref, par le jeu des priorités de sélecteurs, il s'avère que tu ne supprimes pas l'image de fond pour IE6 et inférieurs.
Modifié par Florent V. (18 Oct 2007 - 10:39)

Merci pour toutes ces explications j'ai trouvé ! Grace aux priorités des sélecteurs !

Il y a encore milles choses que je dois apprendre et tout ca ne me donnera pas le temps de :

a écrit :
manger des chips