NEW IMAGE FORMAT 活用計画

Windows版 IE 4以降の CSS
「filter:chroma()"で 24Bit透過PNGを透過させる

「24Bit透過PNGって何それ?」と初耳の方は、いらっしゃるしょうか?
 PNGは、パレットを持たない 24Bit/48Bit、グレースケールPNGでも 透過色(tRNSカラーキー)を指定する事で任意の色を透過する事が可能です。

 でも MS IE(Win版)は、残念な事に GIFと同様な パレットPNGだけしか 透過表示されないのです。
 しかし 考えてみたら IE 4.0(Win)で PNGが表示可能になった時 なんか使える仕様が追加されていたのです。

 IE 4.0以降独自の CSS(filter)機能を使用して Netscape 6や、Opera、MacOS版 MS IE 5等でしか透過表示できない 24Bit透過PNGを 無理やり透過表示してみます。

24Bit 透過PNG (2320色/ 9.7KB)

Hiro Konda's Web

上と同じ PNGに style="filter:chroma(color=#000000)"を追加

Hiro Konda's Web

やったあーっ パレット減色して GIF/PNG(8Bit)にしなくても 透過PNG(もどき)表示できるぞ!」
 でも Win IE だと楽だからと言ってキチンと透過処理しておかないと、ネスケ 6/7や、オペラな人が見たら単なる黒枠になりますから..。

 一般サイトオーナーの使用には、透過GIFが有るから一見無意味な chromaフィルターですが、こうすればマイナーで今まで使いようが無かった24Bit透過PNGを、 ブラウザシェアの99%も同じに見栄えにする事も可能になるわけです。

 24Bit透過PNGは、24BitαチャネルPNGの様にアルファマスク分のファイルサイズが増えず、数バイト(tRNSチャンク分)の増分で済むのでこのフィルタを知っていたらちょっと便利ですね。

 このページの情報に関するご意見、ご質問等がありましたら 掲示板までどうぞ。

追加情報

DirectXフィルタCSSの動作変更について

 セキュリティ変更(2003年10月)の適用された IE 5.01 以降は、DirectX系効果フィルタCSSが、ActiveX 貼り付け動作モードに変更されています。
 いわゆる Flash(swf)と同じ動作モードなので、インターネットゾーンではフィルタ効果が無効化される場合も有ります。

IE 5.5以降のDirectXフィルタとしての Chromaについて

IE 5.5 以降では、以下のように記述してもクロマキー(Chroma)が可能です。
filter:progid:DXImageTransform.Microsoft.Chroma(Color=#000000);
但し、過去(IE 4.0 - 5.0)との互換性を取って「filter: chroma(color=#000000)」としても同様の効果が期待できます。

履歴

 初  版: 02.9.16
 二  版: 04.7.12 IEのセキュリティ変更に関する情報と、IE 5.5以降の記述情報を追加
このページのブラウザテスト解析
ブラウザ名バージョン結果/期待?実験済みか?
MS Internet Exploer (Win)6.0DirectXで 透過するo
5.5DirectXで 透過するo
5.01透過するo
4.01透過するo
Netscape (Win)7.0透過するo
6.23
6.01
4.78透過しない
4.04
Mozilla (Win)1.7透過する
1.0
m18
Opera (Win)7.23
7.02
6.05

サイトナビ

filter: chromaに関連するページ

Valid XHTML 1.0!!