ホームページ > 記事 > ウェブフロントエンド > CSS ビューポート ユニット vh および vw を使用して全画面背景画像を作成する方法
CSS ビューポート ユニット vh および vw を使用して全画面背景画像を作成する方法
- WBOYオリジナル
- 2023-09-13 10:57:141109ブラウズ
CSS ビューポート ユニット vh および vw を使用して全画面の背景画像を作成する方法、具体的なコード例が必要です
モバイル デバイスとレスポンシブ デザインの人気に伴い、全画面の背景画像はデザインにおける一般的な要素となっています。従来の方法では、これを実現するために JavaScript または jQuery を使用していましたが、CSS ビューポート ユニット vh および vw を活用することで、全画面の背景画像を簡単に実装できるようになりました。ビューポートの単位はビューポート (つまり、ブラウザ ウィンドウ) のサイズに相対し、vh はビューポートの高さのパーセンテージを表し、vw はビューポートの幅のパーセンテージを表します。
次の例では、CSS ビューポート ユニットを使用して全画面の背景画像を作成する方法を示します。まず、HTML ファイルを作成し、次のコードを追加します。
<!DOCTYPE html>
<html>
<head>
<style>
.fullscreen-bg {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
z-index: -1;
}
.fullscreen-bg img {
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
</head>
<body>
<div class="fullscreen-bg">
<img src="background-image.jpg" alt="Background Image">
</div>
</body>
</html>上の例では、fullscreen-bg< ;div> という名前のクラスを作成しました。 ; 要素。ビューポート全体に表示されます。背景画像を表示するために、内部に a1f02c36ba31691bcfe87b2722de723b 要素を挿入しました。次に、CSS を使用してこれらの要素のスタイルを設定します。
まず、.fullscreen-bg の position プロパティを fixed に設定して、常にブラウザのビューポートの最上部に留まるようにします。そして左側。次に、top: 0 および left: 0 を使用して、ページの左上隅に配置します。次に、width: 100vw と height: 100vh を使用して、幅と高さをビューポートのパーセンテージに設定し、ビューポート全体を埋めるようにします。次に、overflow: hidden を使用してオーバーフロー コンテンツを非表示にし、z-index: -1 を使用して他のコンテンツの下に配置します。
次に、.fullscreen-bg img の幅と高さを 100% に設定し、object-fit: cover を使用して < 全体を塗りつぶします。 ;img> 画像がどのデバイスでも比例して拡大縮小され、ビューポートに完全に表示されるようにする要素のコンテナー。
最後に、サンプル画像へのパスを background-image.jpg に設定します。これは、必要な背景画像へのパスに置き換えることができます。
上記のサンプル コードを使用すると、CSS ビューポート ユニット vh および vw を使用して、全画面の背景画像を簡単に作成できます。デザインのニーズに合わせて画像のパスを独自の背景画像に置き換えることを忘れないでください。この記事がお役に立てば幸いです!
以上がCSS ビューポート ユニット vh および vw を使用して全画面背景画像を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。