CSS グラデーション背景を繰り返すのではなく、ブラウザ ウィンドウ全体に合わせて拡大するにはどうすればよいですか?

ボディ要素のグラデーションの背景: 繰り返しまたは引き伸ばしますか?

Web デザインでは、背景に CSS グラデーションを採用すると、美しさを向上させることができます。ただし、body 要素にグラデーションを適用すると、共通の問題が発生します。つまり、グラデーションが伸びなくなり、繰り返しになってしまいます。

質問:

ドキュメントの本文コンテンツの高さは 300 ピクセルです。 -webkit-gradient または -moz-linear-gradient を使用してグラデーション背景を設定すると、高さわずか 300 ピクセルのグラデーションが残りのウィンドウ スペースを埋めるために無限に繰り返されます。グラデーションを繰り返すのではなく、ウィンドウに合わせて拡大する解決策はありますか?

答え:

ウィンドウ全体を埋めるように拡大するグラデーションを実現するには、次のようにします。次の CSS を適用します:

html {
    height: 100%;
}

body {
    height: 100%;
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

• HTML 要素の高さは次のように設定されます。ウィンドウ全体の高さに確実に拡張するには 100%。
• body 要素の高さも 100% に設定され、HTML 要素内の使用可能な高さを埋めます。
• margin: 0ボディの周囲の不要なスペースを削除するために追加されます。
• background-repeat: no-repeat はグラデーションの繰り返しを防ぎます。
• background-attachment: 修正により、ウィンドウがスクロールしてもグラデーションが所定の位置に維持されます。

これらの CSS ルールを実装すると、body 要素のグラデーションの背景が拡大されて領域全体を埋めるようになります。ウィンドウ全体の高さを調整し、視覚的にシームレスで没入感のある効果を提供します。

以上がCSS グラデーション背景を繰り返すのではなく、ブラウザ ウィンドウ全体に合わせて拡大するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。