css - オフセット付き CSS 背景グラデーション

Question

背景画像としてグラデーションを体に適用しました。次に、を使用して上部に 255px のオフセットを追加しましたbackground-position:0 255px;。

1 つの小さな問題を除けば、かなり良さそうに見えます。もちろん、グラデーションはページの下部ではなく、255 ピクセル下で終わります。

グラデーションを一番下で終了させ、オフセットから開始する簡単な方法はありますか?

http://jsfiddle.net/julian_weinert/ar6jC/

Answer 1

次のように、目的を達成できます: 背景を に配置し、0px 0px次のように、上部に 1 つの単色領域を配置し、次に実際のグラデーションを配置して、より多くのカラー ストップでグラデーションを定義します。

background-position: 0px 0px;
background-image: linear-gradient(to bottom, 
    #FFFFFF 0px,     /* Have one solid white area */
    #FFFFFF 255px,   /* at the top (255px high). */
    #C4C7C9 255px,   /* Then begin the gradient at 255px */
    #FFFFFF 100%     /* and end it at 100% (= body's height). */
);  

(サンプル コードは Chrome と FireFox の最新バージョンで動作しますが、同じ原則を適用して、すべての主要なブラウザーとバージョンをサポートするように適応させるのは簡単です。)

この短いデモも参照してください。