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 サイトの他の関連記事を参照してください。

関連ラベル：

css

ソース：php.cn

前の記事：CSS コントロール div がブラウザのサンプル コードの下部に修正されました 次の記事：CSS で float の高さを複数の div に適応させる 2 つの方法

このウェブサイトの声明

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

著者別の最新記事

• HTMLで太字、斜体、下線、取り消し線などのフォント効果を設定する例の紹介
  1970-01-01 08:00:00
• Java バージョンの Redis を実装する
  1970-01-01 08:00:00
• 最も単純な WeChat アプレットのデモ
  1970-01-01 08:00:00
• Pythonでのpandas.DataFrameの簡単な操作方法（作成、インデックス、追加、削除）の紹介
  1970-01-01 08:00:00
• WeChat ミニ プログラム: タブ効果の実装方法の例
  1970-01-01 08:00:00
• Python は辞書構造の出力を美しくするためのカスタム メソッドを構築します
  1970-01-01 08:00:00
• HTML5: Canvas を使用してビデオをリアルタイムで処理する
  1970-01-01 08:00:00
• Asp.net は SignalR を使用して画像を送信します
  1970-01-01 08:00:00
• WeChat ミニ プログラム開発チュートリアル - App() および Page() 関数の概要
  1970-01-01 08:00:00
• Python Redisの使い方を詳しく解説
  1970-01-01 08:00:00

最新の問題

CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア

から 2024-04-16 10:10:18

0

0

1335

ページが突然 CSS またはブートストラップを取得できなくなります それで、私はページを開発しています。昨日その一部を実行してうまくいきました。そして今日は残りの作業を続けましたが、すべてがうまくいきました。通常の HTML ページとして開こうとす...

から 2024-04-06 21:58:04

0

1

800

Javafx でインライン CSS スタイルを動的に変更する アプリケーションが最大化されているときにペインの背景画像を変更しようとしています。私の背景はインライン CSS を使用して設定されています。スタイル用に 2 つの異なる変数と if...

から 2024-04-06 20:57:16

0

1

487

CSS でフローティング要素を水平ではなく垂直にスタックするにはどうすればよいですか? 片側にメインコンテンツ、もう一方に追加コンテンツがある 2 つの列を持つ Web ページを作成しようとしています。ただし、float プロパティを使用して追加の列を左に揃えているた...

から 2024-04-06 20:45:26

0

2

386

他の CSS コードに関係なく、フレックスボックス内のテキストを強制的に垂直方向の中央に配置する方法はありますか? 開発中の Web サイトで使用されている大規模な CSS コードの一部である次の CSS コードがあります。 }.card-u{margin:20px;padding:20px;w...

から 2024-04-06 20:41:51

0

1

518

関連トピック

詳細>

• css
• CSS中心
• CSSに画像を挿入する方法
• CSSが表示を超えています...
• CSSフォントの色
• CSSとは何ですか
• CSSで三角形を書く方法
• CSSで文字の色を設定する