CSS グラデーションがブラウザ ウィンドウ全体に表示されないのはなぜですか?

Web ブラウザーでの一貫性のないグラデーション拡張: 包括的な説明

body 要素の CSS3 グラデーション背景を確立する際、ユーザーは興味深い問題に遭遇する可能性があります。グラデーションがウィンドウ全体に広がるのではなく、そのパターンを繰り返す動作。これは WebKit ブラウザと Gecko ブラウザの両方で意図された機能ですが、目的の効果がウィンドウの下部まで広がる連続的なグラデーションである場合、当惑する可能性があります。

問題の理解

ブラウザのデフォルトの動作では、背景サイズがウィンドウより小さい場合、グラデーション パターンを繰り返します。 body 要素のコンテンツの高さが 300 ピクセルのみの場合、グラデーションはその高さのみをカバーし、ウィンドウ内の残りのスペースを埋めるために無限に繰り返されます。

デフォルトの動作のオーバーライド

フルウィンドウ グラデーションの望ましい効果を実現するには、次を使用してデフォルトの動作をオーバーライドする必要があります。 CSS。これは、次のスタイルを適用することで実現できます:

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

html 要素と body 要素の両方の高さを 100% に設定すると、ウィンドウ全体がグラデーションの領域になります。マージン: 0;ルールにより、body 要素の周囲に余分なスペースがないことが保証され、background-repeat: no-repeat;グラデーションが繰り返されるのを防ぎます。さらに、background-attachment: 修正されました。ページのコンテンツと一緒にスクロールしないように、グラデーションを所定の位置に修正します。

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