IE6でPNG透過画像が正常に表示されない問題をCSSで解決する方法

長い間 CSS を書いていなかったので、長い間 PNG の透明なロゴに苦労しました。前のページで透明性の問題を考慮していなかったのも私の責任です。インターネット上でいくつかの方法を見つけましたが、その中には CSS で実装されているものと、JS で実装されているものがあります。純粋な CSS を使用して解決できる場合は、Blueberry Princess に感謝します。あなたの助け。次の 2 つの方法は試してうまくいきましたが、仮想マシン上の ie6 イメージは完全に透明です。それが仮想マシンに問題があるかどうかはわかりません。
まず画像を PNG-24 透明形式で保存します。
(画像には絶対パスが必要です)
方法 1: png 画像を背景として使用します
ハックに注意してください
html コード

< ;/div>
css code
.logo { width: 338px; height: 57px; float: left; url( /images/logo.png) 0px 0px テキストインデントなし: -1000px; _背景画像 : なし; フィルター:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='#'" /images/logo.png', senabled='true', sizingMethod='scale'); }

標準: _background-image: none ; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='#'" /templets/dyimgs/wymrs/images/logo.png'、enabled='bEnabled'、sizingMethod='image') ;

方法 2: png 画像を挿入し、img を定義します
この方法では、任意のサイズの完全に透明な画像parent.gifを準備する必要があります。
html コード

< /a>

.logo { width: 338px; height: 57px; float: left; }
.logo img { width: 338px; }
/* ie6 と互換性のある png * /
.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
);
}

この透明フィルターがハイパーリンクに追加されると、ページ上のすべてのハイパーリンク がクリックできなくなることがあります。 is :

Addposition:relative;

ただし、ここでの画像パスは相対パスであることを思い出していただきたいため、この相対パスは CSS ではなく HTML に基づいていることに注意してください。

以上がIE6でPNG透過画像が正常に表示されない問題をCSSで解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。