ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS3 グラデーションがブラウザ ウィンドウ全体に拡大しないのはなぜですか?

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

Linda Hamilton
Linda Hamiltonオリジナル
2024-12-10 10:09:15799ブラウズ

Why Doesn't My CSS3 Gradient Stretch to Fill the Entire Browser Window?

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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。