半透明フィルタ　Microsoft.AlphaImageLoader 1

Webサイトにて半透明（アルファチャンネル保持）の画像を使用したいときは、PNG形式の画像を利用しますが、まだまだかなりのシェアを占めるIE6では対応しておらず、背景にシャドウを落としたいときや背景を透かして見せたいときは困ります。

背景の画像と半透明のもの（シャドウや透かしたいもの）一緒に一枚の画像として作成すると問題ないのですが、リキッドデザインが必要な場合などブラウザの幅により半透明のものの位置が変わってしまうものに関してはこの方法は取れません。かといってGIFの透明画像では、半透明が表現できないので×。

そんなときはIEのフィルター機能を使います。
色々な効果を得ることの出来るフィルターがありますが、半透明を表現するには以下を使用

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader

HTML

<div id="alpha">ここが半透明。ここが半透明。</div>

CSS

body {
background-image:url(bg.gif);
}

div#alpha {
width:250px;
height:291px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=alpha_bg.png);
}

body > div#alpha {
background:url(alpha_bg.png) 0 0 no-repeat;
}

サンプルはこちら
ただし、この方法ですと<div id="alpha">～</div>内に<a>があるとリンクを選択できなくなる不具合がでます。

これを改良し、リンクもクリックできるように改良したものの紹介は次のエントリで。

2007.8.29追記

もっと手っ取り早く簡単な方法を記載しました。
詳細はコチラ

月々5,000円から始める長期投資。セゾン投信