Ich habe lange Zeit kein CSS mehr geschrieben. Ich hatte lange Zeit mit einem transparenten PNG-Logo zu kämpfen. Es ist auch meine Schuld, dass die vorherige Seite das Thema Transparenz nicht berücksichtigt hat. Ich habe im Internet mehrere Methoden gefunden, von denen einige mit CSS und andere mit JS implementiert sind. Wenn Sie reines CSS zur Lösung verwenden können, verwenden Sie einfach CSS Eure Hilfe. Die folgenden beiden Methoden wurden ausprobiert und funktionierten, aber das ie6-Image unter meiner virtuellen Maschine ist völlig transparent. Ich weiß nicht, ob es ein Problem mit meiner virtuellen Maschine ist.
Speichern Sie das Bild zunächst im transparenten PNG-24-Format.
(Das Bild muss einen absoluten Pfad haben)
Methode 1: PNG-Bild als Hintergrund verwenden
Achten Sie auf den Hack
HTML-Code
< a href=" /">logo
css code
.logo { width: 338px; height: 57px; float: left; 0px 0px no-repeat!important; text-indent: -1000px; _background-image: none filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='#'" /images/logo.png', senabled='true' , sizingMethod='scale'); png', aktiviert ='bEnabled', sizingMethod='image');
Methode 2: PNG-Bild einfügen und img definieren
Diese Methode erfordert die Vorbereitung eines vollständig transparenten Bildes transparent.gif mit jede Größe.
HTML-Code
CSS-Code
.logo { width: 338px; height: 57px; float: left; }
.logo img { width: 338px; ; }
/* png transparent kompatibel mit ie6 */
.logo img {
azimuth: 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
);
}
Manchmal werden Hyperlinks hinzugefügt Nach Verwendung dieses transparenten Filters sind alle Superlinks
nicht mehr anklickbar. Die Lösung ist:
Position hinzufügen: relativ;
Aber hier möchte ich Sie daran erinnern, dass der Bildpfad hier ein relativer Pfad ist. Es ist daher erwähnenswert, dass dieser relative Pfad auf HTML und nicht auf CSS basiert.
Das obige ist der detaillierte Inhalt vonSo lösen Sie mit CSS das Problem der normalen Anzeige transparenter PNG-Bilder in ie6. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
