cssの最近のブログ記事

via IE-winで透過PNGを利用する方法

バージョン６までのIEはPNGのアルファチャンネル（半透明）に対応していないので、普通に使うと透過部分が灰色っぽくなり、期待はずれな結果に終わる。IE6でも透過PNGを表示するには、次のように記述する。

1. #overlay {
2. filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="./overlay.png", sizingMethod="scale");
3. }

これは「AlphaImageLoader Filter」という指定。元は「要素」と「要素の背景」の間に画像を配置する指定で、IEの独自拡張。Direct Xで実現してます。画像にアルファチャンネル（透過度情報を保存するデータ領域）が設定してある場合、これを有効にします。

ただ、このままだとIE以外だと画像が表示されません。実際使うなら、以下のように指定すると良いでしょう。

1. #overlay {
2. background: transparent url(./overlay.png) no-repeat left top !important;
3. background: none;
4. filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="./overlay.png", sizingMethod="scale");
5. }

まず普通にPNG画像を背景画像として指定。次にIEで解除。そしてIE用にPNG画像を指定する。このようにすればIEでも、その他のモダンブラウザでも、概ね同じように「overlay.png」が表示されます。

memo: IE6-win以下は、同一プロパティ内の!important指定に問題があり、常に後に書いたほうが優先される。

Data

属性	説明
enabled	フィルターの有効、無効を指定します。 1（true）で有効、0（false）で無効。デフォルト値は1。
sizingMethod	画像の貼り付け方を指定します。 cropはそのまま。imageは要素を画像の大きさに合わせ、scaleは要素の大きさに合わせて画像を拡大（縮小）します。デフォルト値はimage。
src	画像のURLを指定します。 デフォルト値は無し。

「AlphaImageLoader」が有効なのは、IE5.5からです。IE5.01や、それ以前のレガシーブラウザに配慮する必要はあります。

あと、「AlphaImageLoader」を指定した要素が<a>タグを含む場合は注意しましょう。リンク領域がクリックできなくなる可能性があります。解決の鍵は「position: relative;」と「z-index」。たとえばAlphaImageLoderを指定した要素の内側に<div>でも作って指定してやれば良いでしょう。ただ残念ながら、全ての状況で有効な訳ではありません。隣り合い、重なり合うレイヤに対していろいろ試してみましょう。

おまけ_1 (2007.02.14)

いちおこういう方法もある。

1. #wrap {
2. background-color: #fff;
3. filter:alpha(opacity=80);
4. -moz-opacity: 0.8;
5. opacity: 0.8;
6. }

3行目がIE。4行目がMozilla系。5行目がモダンブラウザ用。
注意すべきなのは、要素の背景っていうか要素自体を透明化する点。使いどころが難しいけど、単色の透明度調節なら（画像を用意しなくても良い分）管理も更新も楽です。

参照： QuirksMode, CSS/Declarations/opacity

おまけ_2 (2007.03.30)

ここまでは背景画像に透過PNGを使う方法だったけど、HTML上に透過PNG画像を直接置きたい場合は、PNG Behaviorを利用してみてはどうでしょう？

PNG Behaviorは、AlphaImageLoaderとHTCファイルを利用して（IEで）透過PNG画像を使うスクリプト。流れとしては、以下みたいな感じ。

1. 画像のsrc属性から「.png」を検出
2. src属性を透過gifのものに置き換える
3. PNG画像のパスでAlphaImageLoaderを適用

実装は.htcファイルをアップロードし、CSSに一行追加するだけです。

1. img {
2. behavior: url("pngbehavior.htc");
3. }

behaviorはIE 5.0からサポートされた機能で、HTMLやJavaScript等によって構成されるHTC（HTML Component）ファイルをHTML上で使用するプロパティです。このプロパティに対応しているのはIEのみなので、PNG BehaviorのスクリプトはIEにだけ読み込まれることになります。