IE-winでも透過PNGは利用できる
Thursday, Jun 29, 2006 - 01:04 +09:00
※この記事は追記・編集して新サイトへ移行されています。
透過PNGってのは透明度を付加した画像のこと。「完全な透明」か「完全な不透明」かの二択しかなかった透過GIFと違い、もっと詳細に透明度を指定することができます。50%とか25%とか。巧く使えばデザインの自由度が凄く広がるシロモノなんだけど、IE-winはデフォルトでサポートしていません。
今回の纏めは、そのIE-winで透過PNGを使う方法。
といってもCSSにちょちょいとコピペするだけですけどね。以下みたく。
#overlay {
background-image: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="./overlay.png", sizingMethod="scale");
}これは「AlphaImageLoader Filter」という指定。なんだか仰々しい文字列ですね。元は「要素」と「要素の背景」の間に画像を配置する指定で、Direct Xで実現してます。そして画像にαチャンネル（透過度情報を保存するデータ領域）が設定してある場合は、これが有効になると。
| Attribute | Property |
|---|---|
| enabled | フィルターの有効、無効を指定します。 1（true）で有効、0（false）で無効。デフォルト値は1（true）。 |
| sizingMethod | 画像の貼り付け方を指定します。 cropはそのまま。imageは要素を画像の大きさに合わせ、scaleは要素の大きさに合わせて画像を拡大（縮小）します。デフォルト値はimage。 |
| src | 画像のURLを指定します。 デフォルト値は無し。 |
AlphaImageLoaderに対応しているのは、IE6とIE5.5のみ。モダンブラウザ(Opera. Mozilla, NN, Firefox, Safari, Camino, IE-macなど)はPNGに対応しているから良いとして、IE5.0を対象に入れている場合は効果がないので一考の余地あり。
備考
AlphaImageLoaderを使用した要素内にリンクを設ける場合、リンクをクリックできなくなります。<a>領域を絶対配置にして要素の上に被せる必要があるでしょう。
追記: 2006/07/05画像へのパスは、絶対指定で記述する。相対だと巧くいかないことが多いようです。また、<a>領域自体にAlphaImageLoaderを使用したなら、この場合はリンクが有効になるみたいです。
posted in HTML/CSS | Comment (2) | Trackback (0)
2 Comments
- 1. haya / September 05, 2006 at 22:02
まさに今やりたいことだったので、とても助かりました。ありがとうございます。
IEのみの対応なら、上記のようにしても問題ないのですが、Firefoxなどにも対応させるときは
* html div#overlay { ... }
のようなIEのみにCSSを適用させるいんちきハックを併用するといいと思います。Firefox、IEで両方とも思い通りに表示させられることを確認しました。あと、試してみたところ <a> タグは絶対配置ではなく、相対配置(position: relative;)でもクリックできるようになりました。
positionを明記しない場合は、リンクだけでなく、フォームも選択不可能になりました。。。恐るべし。
- 2. Sig. / September 07, 2006 at 18:32
お役に立てたようで、嬉しいです。
指摘されたとおり、上記をそのままコピペするだけだとFirefox等のモダンブラウザで「background: none;」になっちゃいます。その際、
* html div#overlay { ... }
とするのも手ですが、「* html」だけだとIE-macにも適用されてしまう（IE-macは透過PNGに対応してる）ので、余裕があれば/* hide from IE-mac \*/
* html div#overlay { ... }
/* --- end --- */とでもしておくと良いでしょう。
リンクやフォームに関しては、相対配置でも「z-index」を適切に指定しておけば大丈夫です＾＾ｂ
Trackback
- このエントリーのトラックバックURL
- http://rospear.info/other/mt-tb.cgi/189