久々に仕事ネタでも書こうかと思います。 半透明が使えるPNG。GIFに変わるフォーマットとして注目を集めてますが、いまいち使われていません。 半透明が使えるという事は、どんな背景画像にも綺麗に馴染むアイコンやらボタンやらが再現できるわけです。 やろうと思えばPhotoShopのレイヤーを全部別々にPNGに書き出して、div入れ子で重ねまくりって事もできるわけです。 で、なんでいまいち使われないかと言うと、IEで半透明がサポートされていないからです。最低。 でもちょっと調べたら解決する方法がいくつかあったので、備忘録を兼ねてご紹介。 動作検証とかちゃんとしていないので、自己責任でお願いします。 まず、CSSに ------------------------------------------ html>body #img { background: url(img.png) no-repeat; width: 25px; height: 26px;} ------------------------------------------ を記入。html>bodyはIEだけ無視させるハックです。 さらにhtmlには、 ------------------------------------------ <div id="img" style="width: 25px;height: 26px; filter:progid:DXImageTransform. Microsoft.AlphaImageLoader (src='img.png',sizingMethod=scale);"></div> ------------------------------------------ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='icon_cd.png',sizingMethod=scale); これがミソです。詳しくは不明ですがIE独自の機能を呼び出してるみたい。 IEはこの記述で画像を表示。IE以外はCSSのbackgroundで画像を表示させています。 きっちり仕様に従うならdivの中にalt代わりのテキストを入れて、cssで吹っ飛ばせばいいと思います。 気にして見ると、png画像を使ってるサイトは結構ありました。特にフルcssのサイトで。 半透明が使えると、デザインの柔軟性も高くなりますし、コーディングもかなり楽になるんじゃないかと思います。 ビジュアルの上にあるボタンとか、きっちりスライスして、ガチガチにテーブルで組むとかしなくてよくなりますし。