ホームページ > ウェブフロントエンド > CSSチュートリアル > ページ全体をフルスクリーンの背景グラデーションで埋めるにはどうすればよいですか?

ページ全体をフルスクリーンの背景グラデーションで埋めるにはどうすればよいですか?

Patricia Arquette
リリース: 2024-10-30 02:57:02
オリジナル
269 人が閲覧しました

How to Make a Full-Screen Background Gradient Fill the Entire Page?

全画面の背景グラデーションの確保

全画面の背景グラデーションの実現は、Web 開発における一般的なタスクです。ただし、body 要素がページ全体を占めていない場合、グラデーションが切り詰められて表示されることがあります。

を効果的に作成するための解決策は次のとおりです。コンテンツの高さに関係なく、要素が画面全体に表示されます。

次の CSS プロパティを に適用します。そして

要素:
<code class="css">html, body {
    margin: 0;
    height: 100%;
}</code>
ログイン後にコピー

これにより、 の両方が保証されます。そして

要素には余白がないため、要素の周囲の空白が効果的に排除されます。さらに、高さを 100% に設定すると、これらの要素の高さがブラウザ ウィンドウの垂直方向のスペース全体を占めるように指定されます。

その結果、要素は画面全体に拡大され、存在するコンテンツの量に関係なく、放射状のグラデーションの背景がページ全体に表示されます。

以上がページ全体をフルスクリーンの背景グラデーションで埋めるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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