Maison >interface Web >tutoriel CSS >Comment utiliser CSS pour résoudre le problème de l'affichage normal des images transparentes png dans ie6

Comment utiliser CSS pour résoudre le problème de l'affichage normal des images transparentes png dans ie6

高洛峰
高洛峰original
2017-03-27 17:25:531670parcourir

Je n'ai pas écrit de CSS depuis longtemps. J'ai longtemps eu du mal avec un logo png transparent. C'est aussi de ma faute si la page précédente n'a pas pris en compte la question de la transparence. J'ai trouvé plusieurs méthodes sur Internet, dont certaines sont implémentées avec CSS, et d'autres avec js. Utiliser js semble excessif. Si vous pouvez utiliser du CSS pur pour le résoudre, utilisez simplement CSS. votre aide. Les deux méthodes suivantes ont été essayées et efficaces, mais l'image ie6 sous ma machine virtuelle est complètement transparente. Je ne sais pas s'il s'agit d'un problème avec ma machine virtuelle.
Enregistrez d'abord l'image au format transparent PNG-24.
(L'image doit avoir un chemin absolu)
Méthode 1 : Utiliser l'image png comme arrière-plan
Faites attention au hack
code html


code css
.logo { largeur : 338px; hauteur : 57px; 0px 0px no-repeet!important; text-indent: -1000px; _background-image: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='#'" /images/logo.png', senabled='true' , sizingMethod='scale'); >

Standard : _background-image : aucun; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='#'" /templets/dyimgs/wymrs/images/logo. png', activé ='bEnabled', sizingMethod='image');


Méthode 2 : Insérer une image png et définir img
Cette méthode nécessite de préparer une image complètement transparente transparent.gif, avec n'importe quelle taille.
code html


code CSS
.logo { largeur : 338 px ; hauteur : 57 px; ; }
/* png compatible de manière transparente avec ie6 */
.logo img {
azimut: expression(
this.pngSet ? this.pngSet = true:(this.nodeName == "IMG" && "http://blog.51cto.com/viewpic.php?refimg=" + this.src.toLowerCase().indexOf('.png')>-1 (this.runtimeStyle.backgroundImage = "none" ,
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='#'" //qianduangcs.blog.51cto.com/2624849/" + "http://blog.51cto.com/ viewpic .php?refimg=" + this.src + "', sizingMethod='image')",
"http://blog.51cto.com/viewpic.php?refimg=" + this.src=' # '" /images/transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace(' " )',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='#'" //qianduangcs.blog.51cto.com/2624849/" + this.origBg + " ', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")), this.pngSet=true
);
}

Parfois, des hyperliens sont ajoutés Après avoir utilisé ce filtre transparent, tous les hyperliens de la page ne sont plus cliquables. La solution est :

Ajouter la position : relative;

Cependant, je voudrais vous rappeler que le chemin de l'image ici est un chemin relatif, il convient donc de noter que ce chemin relatif est basé sur du HTML et non du CSS.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn