CSS ビューポートユニット vh および vw を使用して全画面背景画像を作成する方法-CSSチュートリアル-php.cn

CSS ビューポートユニット vh および vw を使用して全画面背景画像を作成する方法

WBOY

リリース： 2023-09-13 10:57:14

オリジナル

1133 人が閲覧しました

使用 CSS Viewport 单位 vh 和 vw 创建全屏背景图像的方法

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&lt ;div&gt という名前のクラスを作成しました。 ; 要素。ビューポート全体に表示されます。背景画像を表示するために、内部に <img> 要素を挿入しました。次に、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 を使用して &lt 全体を塗りつぶします。 ;img> 画像がどのデバイスでも比例して拡大縮小され、ビューポートに完全に表示されるようにする要素のコンテナー。

最後に、サンプル画像へのパスを background-image.jpg に設定します。これは、必要な背景画像へのパスに置き換えることができます。

上記のサンプルコードを使用すると、CSS ビューポートユニット vh および vw を使用して、全画面の背景画像を簡単に作成できます。デザインのニーズに合わせて画像のパスを独自の背景画像に置き換えることを忘れないでください。この記事がお役に立てば幸いです!

以上がCSS ビューポートユニット vh および vw を使用して全画面背景画像を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。