どうしたら Windows IE5で 半透明透過や、アルファチャネルPNGを透過させる事ができるのだろう?
Operaや、Netscape 6/Mozillaや、Safari、Mac IE 5は、PNGを完全にサポートしているのに、 最新の Internet Explorer 6 for Windows は、見かけ上 PNGを完全サポートしていません。
しかし、IMG
要素(タグ)の変わりに とある方法(VML)で表示させることも可能です。
背景に表示する方法は、別ページのVMLレンダラで 半透明、透過PNGを背景表示する をご覧ください。
今から行う方法は、W3Cに深い人にとっては邪道かな?と思いますが、Win IEしか使用しないユーザーに、PNGの半透明を見てもらえる様にする為には、 一つの選択肢となるでしょう。
解説は、まず下の画像を見た後で...。
24ビットPNGに、アルファチャネルを追加しています。
パレットPNG に、透過濃度を指定しています。
PNG 裏技(3)で使われた、24ビットPNGに透過(tRNS)指定した画像です。
8ビットグレースケールPNGに、アルファチャネルを追加しています。
....何だこれは ? 新手のHTMLかな ?
<?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <!--[if gte vml 1]> <xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v" /> <![endif]--> <title></title> </head> <body> <p> <!--[if !gte vml 1]><!--><img src="*.png" width="*" height="*" alt="*" /><!--<![endif]--> <!--[if gte vml 1]><v:image src="*.png" style="width: *px; height: *px; behavior: url(#default#vml)" alt="*" /><![endif]--> </p> </body> </html>
このページでは、Windows版 MS IE 5以降で追加された特殊なコメント期間である Conditional Comments (英語情報)を使用して、VML対応ブラウザとその他のブラウザとの表示区分処理を行っています。
いわゆるVMLサポートしない Windows版 IE 5.0以降の場合、IMG
タグ(要素)が、有効になります。
このページの情報に関するご意見、ご質問等がありましたら 掲示板までどうぞ。
IE 6 付属の vgx.dll(6.00.2800.1106)では、正しいPNG表示となります。
IE 5 及び 5.5 (5.50.4133.200)の vgx.dll(Microsoft Vector Graphics Rendering(VML))は、Beta バージョンですから 半透明系は、以下の画像の様に擬似半透明表示(ディザリング)されます。 (元絵 : 24Bit+アルファ)
IE 6.0 の 標準準拠モード VML要素を動作させる場合は、スタイルでブロック要素として明示するか、float
で廻りこみを指定する必要が有ります。
そのような対策を取らなかった場合、単なる空領域(スペーサー)となって画像が見えません。
IE 6.0のVMLレンダラでのボックスモデル計算法でのブラウザ互換性を取っていない事によって起きるバグな感じです...。
初公開
他の(古い)ブラウザで styleシート指定等で 問題を起す可能性が有るので念のために
<!--[if gte IE 5]><![endif]-->
のゲートマークで囲んだ。(IE 5以降以外は、通常コメントとなる)
IE 5.0及び、5.5の実験情報を追加 透過PNGをディザ表示するなんて無理矢理だ...。無いよりは、良いか...。
XHTMLに準拠するために <!--[if gte vml 1]><![endif]-->
コメントマークで、XML:NAMESPACE区間(xml:namespace)を全て囲んだ。
VMLに未対応な Win IE 5-6時に、IMG要素を有効にする ハック・コメントマークを追加しました。
<!--[if !gte vml 1]><!--><img src="*.png" ... /><!--<![endif]-->
ブラウザ名 | バージョン | 結果/期待? | 実験済みか? |
---|---|---|---|
MS Internet Exploer (Win) | 6.0 | VML で透過する | o |
5.5 | VML でディザリング透過する | o | |
5.01 | VML でディザリング透過する | o | |
4.01 | IMG で表示する | o | |
Netscape (Win) | 7.0 | IMG で表示する | o |
6.23 | |||
6.01 | |||
4.78 | |||
4.04 | |||
Mozilla (Win) | 1.7 | ||
1.0 | |||
m18 | |||
Opera (Win) | 7.23 | ||
7.02 | |||
6.05 |
IMG
から、VML:IMAGE
へ一括置換えする PNG Behavior (for VML Render)