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

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

Linda Hamilton
リリース: 2024-12-09 10:55:11
オリジナル
913 人が閲覧しました

Why Doesn't My CSS3 Gradient Background Stretch to Full Window Height?

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート