css - CSSのrepeat-yで背景画像を反転します

Question

Webサイトの背景としてグラデーション画像があり、すべてのページサイズで正しく表示されるように問題があります。画像は291x1080で、repeat-xを実行させています。これは、1080p以下のすべてのページで問題ありません。ただし、コンテンツが多いページや解像度が1080pを超える画面の場合は、背景の後に空白が続きます。遷移なしで明るい色から暗い色に変化するグラデーションが奇妙になるため、単純な繰り返しyを実行したくありません。CSSを使用して繰り返し-yを実行するたびに背景画像を反転する方法はありますか？

Answer 1

私の提案：画像ではなく、生地の質感とグラデーションを使用します。

例えば：

body{
     background-image: url("/static/img/background.png") repeat, linear-gradient(top, #000000, #123456);
}

ブラウザサポートタグ（-webkitなど）を必ず追加する必要があります

詳細については、これを確認してください： 同じ要素で背景画像とCSS3グラデーションを組み合わせるにはどうすればよいですか？

Answer 2

これはこれを行うためのCSSです：

body {
    ...
    background: #eeeeee url("/static/img/background.png") 0 0 repeat-x;
    ...
}