imagemagickのconvertコマンドで透過pngを作る
色々迷ったけど、結果的に単純でした。
以下コマンド
RGBA(A=アルファ値)にすればOKらしい。
この画像を使ってCSSでBackground Imageに指定すると
以下のようになる
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio2HNYdi3sjfeec4KxEF4WZwcRxqsTS0FgBauwNbNM3KKQysg0kQGfiJahX0br0r6kSj8MmrUDlYyCBuzW5tqpC2oiaiqS-HwutneAJOx3iMp7tzO1cR3bMzQiI1Pba5YVbN1W8Bu5QKBE/s320/foo.png)
上からそれぞれ、
1. 透過png利用する、背景色navy、文字色:白
2. 透過png利用しない、背景色navy、文字色:白
3. 透過png利用する、背景色pink、文字色:黒
4. 透過png利用しない、背景色pink、文字色:黒
のfirefoxでのスクリーンショット
この透過pngを1つもってるだけで、
立体感のある背景が実現できるが、
IE6だと透過pngが使えないようなので
http://blog.chibatch.jp/javascript/ie6png.html
などで解決するらしい。
以下コマンド
/usr/bin/convert -size 50x50 gradient:#ffffffaa-#ffffff00 bar.png
RGBA(A=アルファ値)にすればOKらしい。
この画像を使ってCSSでBackground Imageに指定すると
以下のようになる
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio2HNYdi3sjfeec4KxEF4WZwcRxqsTS0FgBauwNbNM3KKQysg0kQGfiJahX0br0r6kSj8MmrUDlYyCBuzW5tqpC2oiaiqS-HwutneAJOx3iMp7tzO1cR3bMzQiI1Pba5YVbN1W8Bu5QKBE/s320/foo.png)
上からそれぞれ、
1. 透過png利用する、背景色navy、文字色:白
2. 透過png利用しない、背景色navy、文字色:白
3. 透過png利用する、背景色pink、文字色:黒
4. 透過png利用しない、背景色pink、文字色:黒
のfirefoxでのスクリーンショット
この透過pngを1つもってるだけで、
立体感のある背景が実現できるが、
IE6だと透過pngが使えないようなので
http://blog.chibatch.jp/javascript/ie6png.html
などで解決するらしい。