透過PNG - 餅に切り込み振興会

仕事で兄貴のホームページを作ってるんですが、作業してて透過画像を使う必要が出てきたので調べてみますた。
まず、オイラのしたいことは複数の<div>タグにcssでbackground-image使い、重ねることで擬似レイヤーによる画像表示を行うことなんです。(下記イメージ参照)

安直に透過GIFでやると当たり前のようにジャギーが現れるので汚いんですよ。(下記イメージ参照)

下地が一色だったら透過GIFでいいんですけどね、輪郭がジャギってたら透過GIFにしても何の意味もないじゃないですか。
んじゃあ、綺麗に輪郭が透過処理されるPNG(24bit)にしたらどうよ？ってことでやってみるですよ。

PNGにするとFireFoxやOperaなら大丈夫なんだけど、今度はIEシリーズだと透過部分が灰色に表示されてしまう・・・。(下記イメージ参照)

ネットで調べはしたんですがね、Ajaxやcssのfilter効果を使ってPNGの透過を完全化する方法はいーっぱいあるんです。しかし、<img>タグで表示したときの処理としてのサンプルばっかりで、cssのbackground-imageでのことは書いてないんですよね・・・。cssだから自分で応用利かせればできるんだろーけど、あんまり頭使いたくないんで、別の方法はないかと検索してたら〜

ありました！

IE標準でPNG自体を透過認識させるように保存する方法です。

随分と前の記事ですが、WorldWideWalkerさんとこのエントリー「IE でも透過する PNG 画像を Gimp で作る」です。

IE でも透過する透過PNG の Gimp での作り方を忘れていて難儀したのでメモ。

1. 画像 > モード > インデックス → 最適化パレット(255色)
2. レイヤツール > アルファチャネル → 選択
3. 色から領域を選択 → 選択 → 編集 > 消去(Ctrl-K)
4. ファイル > 名前を付けて保存 > xxx.png

単純に背景を透明にして保存しただけでは駄目で、インデックスカラーにするのとアルファチャネルを使うというのが必要らしい。imagemagick の convert -transparent では駄目だった。Firefox では適当に作っても透過するんだけど、IE は IE7 にならないと PNG サポートがまともにならないのが辛いな。

なるほどなるほど。
GIMP2.0入れてやってみると（上記引用とちょっと操作が違ったけど）確かにIEでもキレイに透過PNGになりました。これならhtmlやcssにjavascriptを使った小細工も必要ないし簡単だねって、おーい・・・。あれだけ高いPhotoShopよりも無料で使えるGIMPの方がPNG使うのに進んでいたとは・・・。
むー、せっかくGIMP入れたんだし、仕事がてらに練習してみようかな。