CSS を使って IE 6 で PNG の半透明を有効にする

概要

IE 6 で img 要素で埋め込んだ PNG ファイルの半透明を有効にする JS はいろいろありますが、CSS でこれを行うための方法です。

利点として、JS で実現した場合、一瞬グレーの部分が表示されてしまいますが、この方法ではそれがありません。 PNG が読み込まれた時点で半透明が有効になっています。

また、CSS のセレクタを用いて、どの img 要素に対して半透明を有効にするかなどを決めることができます。

さらに、onload 後にドキュメントに appendChild や innerHTML などで追加された PNG ファイルについても、半透明が有効になった状態で追加されます。

動作確認用の demo (IE 6 用)

説明

アルファチャンネルを有効にしたい個所に対して以下のようなCSSを適用します。この例では、#sample の中の img 要素となります。(セレクターの先頭の * html は、IE 6 用のハックで、この CSS のコードを IE 7 などで有効にしないためです。)

* html #sample img{ /* IE-expression (fix png alpha) */
behavior: expression(
this.style.filter = this.src.match(/\.png$/) ? "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "')" : this.style.filter,
this.src = this.src.match(/\.png$/) ? this.src.slice(0, this.src.lastIndexOf("/")+1) + "ie6png.gif" : this.src,
this.style.behavior = "none"
);
}

上記の CSS のコードのセレクター部分のみを書き換えてご使用ください。宣言部はそのままコピーで OK です。

加えて、png ファイルと同じディレクトリに ie6png.gif というファイル名にした、透明の gif ファイルを配置します。

全ての img 要素を対象としたい場合には

* html img{ /* IE-expression (fix png alpha) */
behavior: expression(
this.style.filter = this.src.match(/\.png$/) ? "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "')" : this.style.filter,
this.src = this.src.match(/\.png$/) ? this.src.slice(0, this.src.lastIndexOf("/")+1) + "ie6png.gif" : this.src,
this.style.behavior = "none"
);
}

のようにセレクターを書くことで実現が可能ですが、googlemaps などで読み込んだ png ファイルにも有効になってしまい、結果、IE 6 で google maps が表示されないなどといったトラブルが発生しますので、半透明を有効にしたいimg要素のみを対象とするセレクターの書き方にすることを強くお勧めします。

はい。ほとんど問題ないはずです。ここで紹介しているコードでやっていることは、よくあるような IE 6 で png の半透明を有効にするための JS と同じ原理で、透明の gif ファイルの背景に png を敷いている状態になるものとお考えください。

質問です！さんからのコメント

2008年11月28日 10:56

返答ありがとうございます！

すごい便利ですね。

jsで実現するものでpositionとかz-indexに対応してない物が
あったので質問しちゃいました。

いつも勉強させてもらっているので、
これからもよろしくお願いします！

みくろさんからのコメント

2009年1月31日 14:21

質問させて下さい。

IE6で半透明PNGを有効にする
が出来なくて困っています。。。

上のコードを適用したところ、
PNG画像自体は半透明になったのですが、
その裏にある（？）「代替テキスト」と
「画像が表示できないときのマーク（四角に赤い×）」も透けて見えてしまうんです。

以下が記述したコードです。

他のCSSは全て別ファイルです。
の部分にだけ適用させようとしています。

ORANGEE

* html #main img{ /* IE-expression (fix png alpha) */
behavior: expression(
this.style.filter = this.src.match(/\.png$/) ? “progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’” + this.src + “‘)” : this.style.filter,
this.src = this.src.match(/\.png$/) ? this.src.slice(0, this.src.lastIndexOf(”/”)+1) + “ie6png.gif” : this.src,
this.style.behavior = “none”
);
}

なにかが間違っているのか、
それとも他に解決する方法があれば教えて頂けないでしょうか。

説明が下手ですみません。
よろしくお願いします。

adminさんからのコメント

2009年1月31日 14:30

@みくろさん :

はじめまして。ご参照いただきありがとうございます。

おそらく、『ie6png.gif』と名前をつけた透明の gif ファイルが png ファイルと同じディレクトリに無いのではないでしょうか。透明の gif ファイルについては、この記事中のリンクからダウンロードできますのでそれをお使いいただくとよいかと思います。

お試しください。

みくろさんからのコメント

2009年1月31日 20:59

ちゃんと表示されました！
感動です！！

グラフィックデザインが本業なのですが
最近WEB制作の必要に迫られ、
昔かじった程度のHTMLの知識と今のCSSデザインの違いに
正直、かなり戸惑っておりました。

ぜひこれからもここで勉強させて頂きます！
本当にありがとうございました！！

初心者さんからのコメント

2010年2月18日 15:26

ここ数週間の悩みが一瞬で解決しました。
感動です。ありがとう！

コメントフォーム

実験室に戻る

このページの目次