imagemagickのconvertコマンドで透過pngを作る

色々迷ったけど、結果的に単純でした。
以下コマンド

/usr/bin/convert -size 50x50 gradient:#ffffffaa-#ffffff00 bar.png

RGBA(A=アルファ値)にすればOKらしい。

この画像を使ってCSSでBackground Imageに指定すると
以下のようになる

上からそれぞれ、
1. 透過png利用する、背景色navy、文字色：白
2. 透過png利用しない、背景色navy、文字色：白
3. 透過png利用する、背景色pink、文字色：黒
4. 透過png利用しない、背景色pink、文字色：黒
のfirefoxでのスクリーンショット

この透過pngを1つもってるだけで、
立体感のある背景が実現できるが、
IE6だと透過pngが使えないようなので
http://blog.chibatch.jp/javascript/ie6png.html
などで解決するらしい。