Pistil Posté 12 Juin 2007 Partager Posté 12 Juin 2007 (modifié) Bonjour, ou plutôt bonsoir, J'ai un problème (hé bien oui ça arrive!) Je travaille sur le design d'un site, j'ai opté pour l'utilisation d'une image en background et d'une div #container à laquelle g attribué les paramètres suivants afin de laisser apparaitre l'image en background dans body opacity: 0.90;-moz-opacity: 0.9;filter: alpha(opacity=90); Jusqu'ici tout va bien, Le conte u du site est héritier de ces valeurs puisque se trouvant DANS la div #container. Le seul beug que je rencontre est en fait l'image que j'utilise comme en tête (ou header, mais la mise en page est un peu différente) ou titre de page Il s'agit d'un jpeg, avec un effet très "tuto" (un peu classique non?) avec un fond identique à celui du background (#333) et là... c'est le drame Opéra, firefox -> Aucun problème le fondu se passe sans aucun problème! Multiple IE's -> (du 5 au 7) l'image est éclaircit. Et là je ne comprends pas. Voici l'URL de la page en question : Cliquez ici ! J'ai longuement regardé différentes pour palier à mon problème -gif -> mauvais résultat -png -> je n'ai jamais réussis à faire fonctionner les hacks pour pour la transparence des png dans IE J'ai également regardé différentes options de hack css pour ie (j'utilise déjà une css pour ie 7 et une autre pour les versions anterieures) , j'ai également essayé la propriété zoom:1; qui me parait malgré tout un peu obscur. Voici le lien de mes css: les styles de textes les styles de blocs Si quelqu'un avait une solution à mon problème ça m'arrangerait pas mal, merci d'avance! Pistil;) Modifié 12 Juin 2007 par Pistil Lien vers le commentaire Partager sur d’autres sites More sharing options...
Djoule Posté 13 Juin 2007 Partager Posté 13 Juin 2007 j'ai trouver un scrpit pour gerer la transparence des png sous ie, ça t'aidera peut etre... code dans un ficher pngfix.js var arVersion = navigator.appVersion.split("MSIE")var version = parseFloat(arVersion[1])if ((version >= 5.5) && (document.body.filters)) { for(var i=0; i<document.images.length; i++) { var img = document.images[i] var imgName = img.src.toUpperCase() if (imgName.substring(imgName.length-3, imgName.length) == "PNG") { var imgID = (img.id) ? "id='" + img.id + "' " : "" var imgClass = (img.className) ? "class='" + img.className + "' " : "" var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' " var imgStyle = "display:inline-block;" + img.style.cssText if (img.align == "left") imgStyle = "float:left;" + imgStyle if (img.align == "right") imgStyle = "float:right;" + imgStyle if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle var strNewHTML = "<span " + imgID + imgClass + imgTitle + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";" + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader" + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" img.outerHTML = strNewHTML i = i-1 } }} Code a inserer dans le HEAD de ta page <!--[if lt IE 7.]><script defer type="text/javascript" src="pngfix.js"></script><![endif]--> sur mon site ça marche nickel, dis moi si ça le fait pour toi (code trouver en acces libre sur le net mais je n'ai plus la source...) Lien vers le commentaire Partager sur d’autres sites More sharing options...
Pistil Posté 13 Juin 2007 Auteur Partager Posté 13 Juin 2007 Salut, j'ai essayé ta solution Djoule, et ça fonctionne. Comme solution paliative ça fera très bien l'affaire! Ceci dit pour ce genre d'images le png est quand même beaucoup plus lourd! Mais l'important c d'avoir un bon résultat merci encore! Pistil Lien vers le commentaire Partager sur d’autres sites More sharing options...
Djoule Posté 13 Juin 2007 Partager Posté 13 Juin 2007 Le png est plus lourd oui, mais selon la qualité de l'image, tu peux la passer en png 8bit, ce qui allege considerablement le poids. Le tout est de trouver le bon rapport poids/qualité... Lien vers le commentaire Partager sur d’autres sites More sharing options...
Sujets conseillés
Veuillez vous connecter pour commenter
Vous pourrez laisser un commentaire après vous êtes connecté.
Connectez-vous maintenant