コミュニティ学ぶツールライブラリレジャー

日本語

ホームページ > ウェブフロントエンド > CSSチュートリアル > IE6でPNG透過画像が正常に表示されない問題をCSSで解決する方法

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

高洛峰

リリース： 2017-03-27 17:25:53

オリジナル

1643 人が閲覧しました

長い間 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 コード

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

関連ラベル：

ソース：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

関連トピック

詳細>

人気のおすすめ

人気のチュートリアル

詳細>

関連するチュートリアル

人気のおすすめ

最新のコース

最新のダウンロード

詳細>

ウェブエフェクト

公式サイト

サイト素材

フロントエンドテンプレート