オフセット付きのCSS背景グラデーション
背景画像としてグラデーションを体に適用しました。次に、background-position:0 255px;を使用して上部に255pxのオフセットを追加しました。
1つの小さな問題を除いて、かなり見栄えがします。もちろん、グラデーションはページの下部ではなく、255px下で終了します。
グラデーションを下部で終了させ、からへのオフセットで開始する簡単な方法はありますか？
あなたはこのようにあなたが望むことを達成することができます：あなたの背景を0px 0pxに置き、より多くのカラーストップでグラデーションを定義します。
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で動作しますが、すべての主要なブラウザーとバージョンをサポートするように適応させるのは簡単で、同じ原則を適用します。）
また、これ短いデモも参照してください。