winIE 5.5/6 で透過pngを表示する(1)

自サイトを一から作り直してる最中で、背景にアルファチャンネル付きpngで透過する背景を使おうかと。今時は多くのブラウザが24bit png のアルファチャンネルに対応しているので、基本的にはimgタグで張り込むのもCSSでブロック要素の背景に張り込むのscrなりurlなりで指定するだけで何らgifやjpgとかわらずに使える…のが理想なのですが、最も普及しているFuckin’ブラウザ「Windows版 InternetExplorer」だけは未だにアルファチャンンネルを利用した24bit透過pngに対応していません。既にbeta Previewがリリースされ、正式リリースが待たれるIE7では標準対応するようですが、リリース後も当分の間は旧バージョンを利用するユーザーが多いであろうことは否めません。

そこで、調べてみるとIE5.5 / 6でも透過pngを表示することが可能とのこと。ieお得意の独自実装機能を利用します。

alphaImageLoader

ie5.5以降に実装されているフィルター機能を使います。

css:

#myId {
  position: relativve;
  width: 200px;
  height: 200px;
 filter: progid: DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='scale');

html:

<div>
  <p>文章</p>
</div>

scr属性とsizingMethod属性。

「scr」で画像ファイルまでのパスを指定します。ただし、外部cssファイル上で利用する場合に要注意なのが、普通cssファイル内で背景画像等のパスを相対パスで示す際はそのcssファイル自信からのパスを指定するのですが、AlphaImageLoaderにおいてはcssが適用されるhtmlファイルからのパスになります。例えば、下記のようなディレクトリ構成の場合

home ----- index.html
      |
      |------- /images ----- image.png
      |
      |------- /css ----- style.css

普通に背景画像を参照するなら

background-image: url(../images/image/png); 

となりますが、 AlphaImageLoaderの場合は、

filter: progid: DXImageTransform.Microsoft.AlphaImageLoader(src='images/image.png', sizingMethod='scale');

とindex.htmlからみたパスを指定することになります。

「sizingMethod」は貼り込む画像の表示サイズの扱いを指定します。

sizingMethod='scale'

配置する要素（ボックス）のサイズに合わせて画像を縮小／拡大します。

sizingMethod='image'

画像が配置する要素より大きい場合、要素のサイズが画像にあわせて拡大されます。

sizingMethod='crop'

画像が配置する要素より大きい場合、要素からはみ出した部分は表示されません。

ie5.5 / 6 のみを対象とするならこれだけで透過pngを背景として表示できます。 ただし、AlphaImageLoaderでpng画像を貼り込んだブロック要素内ではリンクをクリックできなくなる場合があります。その対策についてはまた後ほど。