ホームページ > 記事 > ウェブフロントエンド > 「要素を全画面の背景のビューポート全体に埋めるにはどうすればよいですか?」
を伸ばす要素の全画面
Q: 背景として Web ページに放射状のグラデーションを適用しました:
<code class="css">background-image: -webkit-gradient(radial, 100% 100%, 10, 90% 90%, 600, from(#ccc), to(#000));</code>
しかし、ページのコンテンツが表示されない場合、グラデーションが不鮮明になります。全画面を占有しないでください。
を確実にするにはどうすればよいですか?要素は常にビューポート全体を埋めるように拡張されますか?A: これを実現するには、次の CSS ルールを使用します。
<code class="css">html, body { margin: 0; height: 100%; }</code>
これにより、
の周囲にマージンがなくなるようになります。要素がページの高さ全体に及ぶことを確認します。その結果、コンテンツの長さに関係なく、一貫した放射状のグラデーションの背景が維持されます。以上が「要素を全画面の背景のビューポート全体に埋めるにはどうすればよいですか?」の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。