IE6用透過pngデザイン

マークアップエンジニア/CSSコーダーにとって、透過pngは鬼門である。

しかしクリエイティブ氏からこういうデザインを実現したい、という要望を受けた。
こういう場合、通常なら透過した部分をそのまま画像として切り出すのだけど、今回は背景画像が動的に切り替わるとのことで、メニュー部分を半透明にする必要がある。

そこで今まで試していなかったIE6用のJavaScriptライブラリを試してみることにする。
IEで透過PNG画像の透過処理を簡単に行うJavaScriptライブラリ「alphafilter.js」:phpspot開発日誌

しかし、透過pngはIE6がなぜか対応していないので問題になる。現状のシェアでは、まだIE6を無視するわけにはいかない。

そこでkづあんのJavaScriptライブラリ「alphafilter.js」を導入してみると…。

IE6透過pngテスト
うまくいきました。

方法も、JavaScriptを読み出したら

画像のclass名にalphafilterを指定

    <img src="./sample.png" class="alphafilter" alt="" />

背景の透過ＰＮＧの場合は次のように行います。

    <p class="alphafilter">内容</p>

（IEで透過PNG画像の透過処理を簡単に行うJavaScriptライブラリ「alphafilter.js」:phpspot開発日誌）

と、とてもシンプル。これは素晴らしい。
僕もいつかはこういう、人の役に立つ素晴らしい何かを作れたら、と思いつつ今日も勉強勉強である。