αチャンネルを持ったPNG画像の透過

説明

GIF画像に変わる新しい画像規格としてPNGというのがあります。 この形式には各ピクセルに透明度(αチャンネル)を設定することができ、 画像を徐々に透明にするといったことができます。
しかし、αチャンネルに標準で対応しているのは現在ではMozilla(およびNetscape6)のみで、 IEでは透明部分にグレーが入った状態で表示されます。 しかしIE5.5では特別な方法を使うことでPNG画像のαチャンネルを有効にすることができます。

サンプル

AlphaImageLoader IMGタグ

ソースコード


BODYに記述

解説・備考

  • MozillaではふつうにIMGタグで貼り付けただけで透過されます。
  • srcで張り込まれる画像は要素の背景にセットされます。
  • DIV、SPAN タグで使用する場合は position を absolute にするか、または width,height を指定すること。
  • 画像のパスに空白文字が含まれるとなぜか画像が表示されません。
  • 参考: AlphaImageLoader フィルター
  • 参考: MSDN: AlphaImageLoader Filter