CSS3 グラデーションの背景がウィンドウの高さ全体に伸びないのはなぜですか?

CSS3 のグラデーション背景の伸縮の問題

問題:

にグラデーション背景を設定しているにもかかわらず、 CSS3 グラデーションを使用して要素を作成すると、グラデーションの高さはコンテンツの高さに固定されたままになり、残りのウィンドウ スペースを埋めるために繰り返し行われます。この現象は、WebKit ブラウザと Gecko ブラウザの両方で発生します。

解決策:

グラデーションを強制的にウィンドウの高さまで伸ばすには、次のコードを適用します。 CSS:

html {
    height: 100%;
}

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

説明:

• html と本体の高さが 100% に設定され、ウィンドウの高さ全体を強制的に埋められます。
• マージン: 0;本文の不要な余白を削除します。
• background-repeat: no-repeat;グラデーションが繰り返されないようにします。
• background-attachment: 修正されました。グラデーションの位置を修正し、ウィンドウのサイズが変更されてもグラデーションが静止したままであることを保証します。

このソリューションにより、ページ レイアウトを繰り返したり中断したりすることなく、グラデーションが垂直方向に伸びてウィンドウ全体の高さいっぱいになります。

以上がCSS3 グラデーションの背景がウィンドウの高さ全体に伸びないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。