28173 sujets

CSS et mise en forme, CSS3

[Resolu] PNG 24 / CSS / IE

Pages :
Hello,

j'aimerai trouver une parade a un problème que j'ai actuelement. J'ai un div central dont le font est une image en png24 avec opacité histoire de pouvoir voir mon clairement et en même temps de laisser entrevoir un fond, ce qui donne un effet plutôt sympas, le problème c'est que sous IE ça fonctionne pas, et comme j'applique cet effet dans mon CSS, je peu pas utiliser l'effet style:filter (filtre microsoft) avec une opacité qui fonctionne en attribu de la balise img.
J'ai trouvé un code JS sur le net pour regler le problème d'incompatibilité je IE et png24 avec opacité mais ça scan le code html, moi c'est dans le css donc ça marche pas.
N'y a t-il donc aucun moyen de résoudre ce problème ? en attendant que un jour IE soit compatible.....

Merci.
Nautiljon.
Modifié par Nautiljon (05 Apr 2005 - 15:15)
Tu peux utiliser la propriété filter en CSS, mais met-le dans un CSS séparé que tu planquera dans des commentaires conditionnels Smiley smile
FlorentG a écrit :
mais met-le dans un CSS séparé que tu planquera dans des commentaires conditionnels Smiley smile

eug, je comprend pas trop là ? faut que je crée un autre fichier css ? et les commentaires conditionnels cad ?

Dsl mais je vois pas Smiley ohwell
Comme la propriété filter est propriétaire, tu peux la mettre dans un fichier séparé, qui ne contiendra par exemple que :
img {
  filter: PROGID:DirectXmachintruc
}


Et ensuite dans le code html, tu met ça :
<!--[if gt IE 5]>
<link rel="stylesheet" type="text/css" href="png.css" />
<![endif]-->


Comme ça il sera masqué pour tous les agents utilisateurs différents de IE Smiley smile
Ok je vois ou tu veux en venir mais moi mon fond est pas une image que j'ai placé dans mon code html, mais via mon css 

#content {
background: url(images/fond.png);
}

donc je peu apparament pas appliquer le filtre Smiley ohwell
Ah... Oui, là c'est une autre histoire. Une fois j'avais réussi, mais je sais plus comment Smiley bawling La solution traîne sur internet normalement Smiley smile
Dans ce genre de cas, personnellement j'utilise IE7. C'est un ensemble de scripts bien architecturés qui règlent bon nombre de problème CSS sous IE 5 et IE6. En particulier, il ouvre la possibilité d'utiliser des images avec transparence en background.
Voici la page exemple relativement à ton besoin.
xartotal a écrit :
tu peux me dire avec quoi tu a fait ton png 24, je trouve de bonne qualité ton img !!!!

A qui tu parles ?

L'exemple qu'à montré Xavier provient du site de l'auteur du script IE7...

Tu peux créer des PNG avec couche Alpha avec Photoshop, et bien d'autres.
mmm, j'ai dl le pack, extrait dans un dossier sur mon serv et foutu le script dans le head de ma page mais ça donne rien. Soit j'ai loupé une étape soit ça fonctionne que pour la transparence et pas pour l'opacité Smiley bawling
De mon coté j'ai testé le javascript IE7 avec succès sur des images en éléments comme en background.

Comme tu l'indiquais, il y a sans doute une nuance entre "transparence" et "opacité", mais cela me conduit à 2 questions :
- quelle est la différence, au sein du format PNG, entre les 2 notions transparence et opacité ?
- ne peux-tu pas faire avec la transparence ce que tu souhaitais obtenir avec l'opacité ?

Pour ma part je crois que PNG comprend en faite une notion de canal alpha qui est selon le vocabulaire la transparence ou l'opacité. IE7 gère correctement le canal alpha, donc indirectement la transparence ou l'opacité.
A mon avis transparence et opacité sont des notions utilisées sur l'interface de ton outil de création, mais qui se rejoignent en un unique concept dans PNG.
Si cette hypothèse est la bonne, tu aurais simplement un problème dans l'exploitation de tes scripts ?
FlorentG a écrit :
le canal alpha n'est disponible qu'en PNG-32, et non en PNG-24
Oui tu as mis le doigt sur le problème. Bravo !
Inutile de chercher la transparence d'une image en 24 bits RGB.
Xavier a écrit :
Oui tu as mis le doigt sur le problème. Bravo !
Inutile de chercher la transparence d'une image en 24 bits RGB.

24 bits + 8 bits Alpha = 32 bits.

Ne cherchez pas plus loin, un PNG Full 32 bits sans couche Alpha, ça n'existe pas.

Dans les logiciels vous ne verrez que maxi 24 bits, et une case à cocher : [*] Transparence.
Modifié par anthony (04 Mar 2005 - 18:02)
mmm, l'installation du module fonctionne bien, j'ai tester en entrant "?ie7_debug=true" dans mon url et ça m'a dit qu'il était bien installé. Par compte j'ai fait un essai en creant une image png 24bits avec un un canal alpha avec PSP9 mais ca fonctionne pas Smiley ohwell
-> http://www.nautiljon.com/test/
Smiley bawling

CSS : 

body {
    background-color: blue;
}
#image {
    border: 1px solid black;
    background-image: url("i.png");
    width: 200px;
    height: 100px;
}

Modifié par Nautiljon (04 Mar 2005 - 23:15)
Je vois ou est le problème, c'est au niveau de l'image PNG apparament. J'ai essayer d'en faire avec plusieurs logiciels mais ça fonctionne pas, par compte celle de la page d'exemple pour IE7 : http://dean.edwards.name/IE7/compatibility/tukan-trans.png
foncionne bien avec le script sous IE. Je vois pas ce qu'il faut faire de special pour créée une image PNG compatible avec ce script Smiley ohwell donc si quelqu'un a la soluce ce serait cool !
Pages :
Sujet clos
Aller à