CSS3を使えば画像を使わずにグラデーションを表示させることはできますが、
その書き方として紹介されている方法は、ボックスサイズに対して%(割合)でグラデーションの幅を指定する方法ばかりです。
そこで、「上から100pxまでグラデーションにして残りはベタにしたい」といったピクセルでグラデーションの幅を決めたい場合の書き方を調べてみました。
background-image:-webkit-gradient( linear, 0 0, /*開始点の位置を座標(X,Y)で指定 */ 0 100, /*終了点の位置を座標(X,Y)で指定 */ from(#ffffff), to(#ff0000) );
webkitの場合、座標指定に(0 , 100px)のように単位をつけると無効になってしまうので、必ず単位無しで指定するのがポイントです。
background-image: -moz-linear-gradient( top, #f30, #ffc 100px /*終了点の位置をpxで指定*/ );
上記のような書き方をすればピクセル幅固定の2色グラデーションを表現できます。
webkitの場合、color-stop()を使った構文だとうまくグラデーションを作る事ができず、
またwebkitもmozも両方、3色以上のピクセル固定をどうしたら良いのかはまだ不明です。
どなたかご存知の方いらしたら教えていただけると嬉しいです。m(_ _)m