[Résolu]Fond PNG transparent + opacité IE

Bonjour,

Je sais qu'il y a déjà eu des sujets là dessus mais je n'ai pas trouvé solution à mon problème en particulier.

Je vous explique: j'ai une image png qui est un rectangle avec contour arrondis (voir ci dessous)


J'ai un div principal avec un fond (genre dégradé de bleu) dans lequel je souhaite mettre mon div avec mon png en fond
Mais je souhaite aussi que le fond ai une opacité de 50%

Pas de problèmes bien sûr avec firefox sur le code:

.opacity{
filter:alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}

Mais sous IE 6, avec le code

#presentation{
width:262px;
height:312px;
position:absolute;
background-image:url(img/accueil/fondpresentation.png) !important;
background-image:url(no-image);
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='img/accueil/fondpresentation.png');
background-repeat:no-repeat;
top:48px;
left:10px;
}

j'ai bien ma transparence mais si j'essaye d'appliquer le filtre

progid:DXImageTransform.Microsoft.Alpha(opacity=50);

Mon image disparait

Bref si je n'utilise que

progid:DXImageTransform.Microsoft.Alpha(opacity=50);

j'ai une opacité mais il n'y a plus de transparence (mon png à un fond gris rectangulaire) et si j'utilise

progid:DXImageTransform.Microsoft.AlphaImageLoader

j'ai ma transparence mais pas mon opacité.

Y a t-il un moyen pour que pour mon div j'ai à la fois mon fond transparent (sans bordure grise rectangulaire) ET avec une opacité de 50 ?

Merci beaucoup pour votre aide en espérant ne pas avoir posé une question qui aura déjà été posté et que je n'aurais pas trouvé
Modifié par Jem (05 Feb 2007 - 16:29)

Bonjour,

Un petit tour sur http://msdn.microsoft.com/workshop/author/filter/filters.asp devrait te permettre de trouver la syntaxe adéquate.

J'ai effectivement trouvé comment mettre les deux fonctions Alpha et AlphaImageLoader ensemble mais ça ne marche toujours pas

L'Alpha semble prendre le pas sur le AlphaImageLoader et du coup je me retrouve à avoir mon alpha à 50% mais aussi à voir la transparence de mon png se colorer en gris

Bonjour,

Pouvez vous donner un exemple concret ? Lien vers la page en question ?

Bonjour,

Vous pouvez voir le rendu ici
http://lacabanedetao.free.fr/index.php

J'ai mon alpha=50 mais la transparence du PNG non (IE seulement, voir avec FF le rendu que je souhaite)

Merci
Modifié par Jem (01 Feb 2007 - 15:06)

Bonjour,

Je ne peux pas constater le problème, car sous Internet Explorer, votre site ne semble pas s'afficher ... du tout -à moins que cela soit une restriction due au JavaScript sur ma machine, j'avoue ne pas avoir regardé le code de vos travaux-.

Avec si peu d'informations, j'ai quand même modifié votre PNG. Faites un simple échange. Si le nouveau PNG fontionne comme vous le souhaitez, supprimez tous les "filtres" mis en place dans CSS, ou sur HTML.

PS : l'image de fond -avec le soleil- aurait probablement un meilleur potentiel de compression en PNG, via l'image originale (évitez toujours de convertir du JPEG vers PNG).
Modifié par original.defeat (01 Feb 2007 - 16:37)

Salut.

Arrête-moi si je me trompe, mais tu n'es pas en train d'essayer de rendre translucide le fond d'un div dans lequel tu veux mettre un PNG transparent en image de fond ?

original.defeat>Merci pour l'image mais en fait le fond principal est amené à changer régulièrement c'est pour ça que je voulais un div blanc translucide

Thomas D.>exactement j'ai mon png transparent sur les bords supérieurs et inférieur (pour qu'on voit uniquement le rectangle avec bords arrondis) en fond de div et je veux le rendre translucide

En gros j'aimerais un PNG qui garde sa transparence et qui devienne translucide sous IE car ça marche très bien sous FF

Merci

Une solution à laquelle je songe, propre à PNG, c'est de créer une image PNG pour chaque fond variable (comme j'ai fais mais pour tous les fonds). Fastidieux, oui ... mais ...

Autre chose, en passant : c'est que sur ma machine que votre site s'affiche très mal ?

Autres ressources pour forcer la transparence, en vrac :
- JavaScript
- CSS
- CSS (bis)
- PHP

On ne pourrait pas supprimer le problème d'opacité en utilisant un PNG ayant la transparence voulue ?

Thomas D. a écrit :
On ne pourrait pas supprimer le problème d'opacité en utilisant un PNG ayant la transparence voulue ?

Nativement, Internet Explorer 6.0 n'exploite que deux valeurs alpha sur un PNG Paletted : 0 ou 255 (opacité totale ou nulle). Le reste (opacité partielle), il ne l'affichera pas correctement.

Quant à un PNG TrueColor+alpha, il n'exploite tout simplement pas le canal alpha , et donc aucun niveau d'opacité.

original.defeat a écrit :
Nativement, Internet Explorer 6.0 n'exploite que deux valeurs alpha sur un PNG Paletted : 0 ou 255 (opacité totale ou nulle). Le reste (opacité partielle), il ne l'affichera pas correctement.

Quant à un PNG TrueColor+alpha, il n'exploite tout simplement pas le canal alpha , et donc aucun niveau d'opacité.

Je suis au courant, merci. Ce que je voulais dire, c'est qu'il n'est peut-être pas nécessaire d'utiliser un filtre pour l'opacité ET un filtre pour corriger la transparence du PNG sous IE.

En utilisant uniquement un PNG transparent, sans jouer sur l'opacité, il devrait être possible d'avoir le même résultat visuel.

Thomas D. a écrit :
un filtre pour corriger la transparence du PNG sous IE.

Si le PNG est encodé en Paletted, c'est effectivement inutile, ce qui n'est pas le cas dans cet exemple .

En réencodant l'image en Paletted, on peut effectivement attribuer une valeur alpha différente pour chaque entrée :
la couleur qui serait hors du cadre (opacité 0), et celle qui est à l'intérieur (opacité 128 par exemple). Dans ce cas, Internet Explorer 6 va restituer correctement la transparence la valeur 0 (donc pas besoin de filtre), mais pas la 128 (qui restitue une opacité partielle dans une application compatible).

Dans l'exemple, le PNG est un TrueColor+alpha. C'est le canal alpha qui gère les valeurs alpha à attribuer : il attribue une opacité nulle sur le contour du cadre, tandis que l'intérieur dispose d'une opacité partielle. Cela Internet Explorer 6 ne le supporte pas, car il n'exploite pas ce Canal alpha.

Thomas D. a écrit :
sans jouer sur l'opacité

Oui, lorsque le fond n'est pas variable, il suffit de restituer l'image sur une application compatible, comme j'ai proposé ci-dessus. Seulement, le fond est variable. Sans attribuer des valeurs alpha autre que 0 et 255, il n'est possible pour IE 6.0 (sans ressources extérieure) de restituer une PNG laissant apparaître l'arrière plan de manière graduelle ... et donc d'obtenir l'effet recherché.
Modifié par original.defeat (01 Feb 2007 - 18:28)

Je ne comprends pas ce qui empêche d'utiliser un PNG32, avec la transparence voulue, et d'utiliser AlphaImageLoader pour avoir la transparence sous IE5.5+, sans devoir jouer avec l'opacité du div.

Thomas D. a écrit :
l'opacité du div

D'accord ... je n'avais pas regardé suffisament le code pour voir le "montage"
@Jem : PNG propose l'effet recherché (TrueColor+alpha, et faites varier l'opacité). La plupart de ces filtres sont inutiles ; seul IE nécessite un coup de pouce.

Merci je n'avais pas pensé au TrueColor+alpha

Cela fonctionne à présent

Merci à tous les 2