png画像はアルファ値を保存できる画像形式で、影などの徐々に透明になっていくような画像を作るときにとても便利な画像だ。
が、これがまたIEのあほが認識しない。透明部分を白く表示するもんだから、違和感この上ないのだ。
背景が一色など、決まったものであれば白くなる部分にその色を敷いて、擬似的にきれいな影を表現できるが、背景が写真や複雑なパターンなどだとそうはいかない。
ボックスを固定すれば問題ないが、それでは柔軟性に欠ける。
そこで、IEとその他のCSSを振り分けることを利用して、別々の画像を読み込ませることでこれを実現してみた。
また、IEには独自仕様で影をつけるフィルタがあったりする。
やり方は簡単、まず振り分けようのCSSを書き、（ここらへんは情報溢れてるので割愛）
IEには影のついていない画像を読み込ませる。そして、そのボックスに影をつけるフィルターを適用する。
そしてIE以外の、png形式を正しく表示できるブラウザ用に、背景としてpng画像を読み込ませる。
これで完成だ。
まぁIE7はpng形式をサポートするみたいだからいらなくなるかもしれないけど、
ま、思いついちゃったからとりあえずのっけとくw
ちなみにサンプルはこちら→
http://www.green.dti.ne.jp/edo/web-test/test2/
なんか不具合があったらコメントにでも残しておいてください(;´□｀)
