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

最新の問題

WordPress 6.0 (add_editor_style) が Gutenberg エディターで style.css を読み込まない カスタムWordPressブロックテーマを作成するためにUdemyWordPressコースを受講しています。 function.php にブロック タイプが正常に登録され、Gute...

から 2023-11-12 20:37:50

0

2

261

CSS の小数点の先頭のゼロが大きな数値では機能しない 最近、100 を超えるリスト項目を含む順序付きリストを作成したときに問題が発生しました。 list-style:10 進数先頭ゼロ;ol{list-style:10 進数先頭ゼロ;...

から 2023-11-07 10:35:53

0

1

236

Sass エラー: ファイルはすでにロードされています: @import '~src/css/quasar.variables.scss', 'quasar/src/css/variables.sass'; src\css\quasar.variables.scss 私は quasar フレームワークを使用しており、プロジェクトのコンパイル中に上記のエラーが発生しました。モジュールのビルドに失敗しました (./node_modules/sass...

から 2023-11-06 21:38:55

0

1

219

HTML/CSSに背景ビデオを埋め込むにはどうすればよいですか? 皆さん、こんにちは。最近問題が発生しました。自分のサイトにビデオの背景を設定しようとしていますが、中央揃えのテキストが一番下まで表示されます。理由はわかりませんが、ナビゲーション ...

から 2023-11-06 13:59:13

0

1

240

JavaScriptでCSS/HTMLの名前付きcolorのRGB値を取得する方法 [name-rgb] という名前の Javascript オブジェクトを作成しました。 Basic:namedColors={AliceBlue:[240,248,255],Ant...

から 2023-11-06 09:05:50

0

2

210

関連トピック

詳細>

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