CSS3 グラデーションがブラウザ ウィンドウ全体に拡大しないのはなぜですか?

CSS3 でのグラデーションのストレッチ

に CSS3 グラデーション背景を指定する場合要素を使用すると、グラデーションがブラウザ ウィンドウ全体に広がることはありません。代わりに、コンテンツ領域が埋まるまで繰り返します。コンテンツを超えてグラデーションを拡張したい場合、この動作はイライラする可能性があります。

解決策

ブラウザ ウィンドウ全体にグラデーションを拡張するには、次の CSS を適用します。 :

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

これらのスタイルは、以下:

• html { 高さ: 100%; }: の高さを設定します。
• body { height: 100%;マージン: 0; }: の高さを設定します。
• background-repeat: no-repeat;: コンテンツ領域を塗りつぶした後にグラデーションが繰り返されないようにします。
• background-attachment: fixed;: スクロールバーが移動してもグラデーションが所定の位置に固定されたままになり、全体にわたって連続的なグラデーション効果が作成されます。ウィンドウ。

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