CSS グラデーションの背景をブラウザ ウィンドウ全体の高さいっぱいにするにはどうすればよいですか?

ウィンドウの高さを埋めるためのグラデーション背景の管理

CSS3 グラデーション背景を に適用する場合要素を使用すると、デフォルトではブラウザ ウィンドウ全体に拡大されるのではなく、繰り返し表示されます。 WebKit と Gecko ベースのブラウザの両方で観察されていますが、この動作は意図的なものです。

これを修正するには、グラデーションを構成する必要があります。

1. Set HTMLの高さ要素:

   html {
       height: 100%;
   }

   ログイン後にコピー

2. ボディを管理する要素:

   body {
       height: 100%;               // Match the height of the HTML element
       margin: 0;                  // Remove any margins to ensure full window coverage
       background-repeat: no-repeat; // Prevent gradient repetition
       background-attachment: fixed; // Keep the gradient in position as the page scrolls (optional)
   }

   ログイン後にコピー

これらの CSS を適用することでスタイルを使用すると、コンテンツ内のコンテンツの高さに関係なく、グラデーションの背景がブラウザ ウィンドウ全体に広がるようになります。 .

以上がCSS グラデーションの背景をブラウザ ウィンドウ全体の高さいっぱいにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。