アルファチャンネルPNGとか言った方がそれっぽいんでしょうか？
英語が嫌いなので透明PNGって言ってますが。
ここ2・3日こいつの処理に頭悩まされてます。
要約するとIE死ねって事です。
特に6。
透明PNGをimgタグで表示する方法は色々見つかったのですが、自分は主に背景表示に使う事が多かったです。こちらは若干情報が少なかったのでメモしときます。
Firefox、オペラ、Safariは良い子なので普通にbackgroundで指定して終わりなんだけど、IE6以下はそうはいきません。
IE6以下のブラウザで透明PNGを背景表示させるには3つのポイントがあるみたいです。
背景に使いたい時はIEの独自拡張フィルタを使う
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(Src='●画像パス●',sizingMethod='●表示方法●');
画像パスはhtmlファイルから見た相対パスなので注意。
/から書いちゃうのが手っ取り早くて良いです。
表示方法は以下の３種類から選べます。
- image
- 画像の大きさに要素を拡大縮小。
width・heightは無視される。
デフォルト値 - scale
- 要素の大きさに合わせて画像を拡大縮小。
要素<画像の時はwidth・heightが指定されていればそれに合わせる。
要素>画像の時は画像が拡大されて表示される。
backgroundのrepeat-y・repeat-xに似た働きをする。 - crop
- そのまま貼付ける。
backgroundのno-repateと同じ。
表示位置の指定は出来ない
独自拡張フィルタで画像を標示させる場合、CSSのbackgroundと違って座標で表示位置の指定は出来ません。
サイズが大きくなければ画像自体に余白を作るのが手っ取り早いです。
背景にPNGを敷いたエリアに内包されているリンクが腐る
フィルタで背景にPNGを敷いたエリアに内包されているリンクが効かない場合があります。
透過PNGに蓋された状態なので要素を上に出す為CSSに
* a , form * { position: relative ; }
と書くと良いです。
ここ数日で何となく分かって来た事なので、この仕事が終わったらあらためてまとめたエントリーを書こうと思います。
今の事務所に入った時、コーディングをメインで振って下さいって言ってあったので、デザインは別の人が作ってくれます。
ありがたや。
今組んでるデザインは、背景に画像のパターン（しかも縦にグラデーションが入ってて色味が均一じゃない）＋角丸＋シャドウが満載というコーダー泣かせな代物で、透明PNGに頼る以外は忠実に再現する方法がありません。
第一印象は最悪……。
でも色がビビットですっごい可愛いデザインなので俄然やる気超出まくり！なツンデレデザインです。
ずっと避けて回ってた透明PNGの処理もとうとう年貢の納め時……。
情報収集だけはしていたので（いや、してたから面倒臭そうで余計に避けてたんだけどね……。）何か不具合が起きてもピンとくるので一安心。
自分が組むと分かっていてデザインをすると、どうしても甘えが出てCSSで組みやすいデザインをしがちです。
なのでCSSを全然知らない位のデザイナーさんが作ったデザインの方が勉強になります。
だって、こんなの絶対自分じゃやらない。
自分に甘いから。
