アダプティブフルスクリーンWebページ背景画像を実現するCSSを詳しく解説-CSSチュートリアル-php.cn

アダプティブフルスクリーンWebページ背景画像を実現するCSSを詳しく解説

小云云

リリース： 2018-02-07 09:12:30

オリジナル

8400 人が閲覧しました

この記事は主に、アダプティブな全画面 Web ページの背景画像を実現する CSS 手法に関する関連情報を紹介します。編集者が非常に優れていると考えたので、参考として共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

Web ページの背景適応型フルスクリーン .PNG

デザイナーは、Web ページに多くのポイントを追加することができますが、ページの背景に大きな画像を使用することは望ましくありません。解像度の異なる画像を表示する画像が変形する、画面が大きいときに背景が露出したくない、つまり、変形せずに画面サイズに適応できる大きな背景画像を実現することです。背景画像はスクロールバーでスクロールしません。

CSSで実装する方法は次のとおりです:

HTML:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>title</title>
</head>
<body>
<p class="wrapper">
    <!--背景图片-->
    <p id="web_bg" style="background-image: url(./img/bg.jpg);"></p>
    <!--其他代码 ... -->
</p>
</body>
</html>

ログイン後にコピー

CSS:

#web_bg{
  position:fixed;
  top: 0;
  left: 0;
  width:100%;
  height:100%;
  min-width: 1000px;
  z-index:-10;
  zoom: 1;
  background-color: #fff;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  background-position: center 0;
}

ログイン後にコピー

それでは、CSSの各コードの機能を分析してみましょう:

  position:fixed;
  top: 0;
  left: 0;

ログイン後にコピー

この３つ文は p 全体を画面の上部と左に固定するためのものです

width:100%;
height:100%;
min-width: 1000px;

ログイン後にコピー

上記の最初の 2 つの文は、全画面効果を実現するために、 p 全体を画面と同じサイズにするためのものです。この実装では、画面幅が 1000 ピクセル以内の場合、p のサイズは変更されません。つまり、この場合、画面幅をスケーリングするときに、画像はスケーリングされません (1000 ピクセル内でのみ有効)。

z-index:-10;

ログイン後にコピー

これの目的は、HTML ページの各レベルの下に p 全体を作成することです。通常の状況では、最初に作成されたレベルの z-index 値は 0 なので、ここに -1 を記述すると、も実現できますが、ここで -10 を記述するのは、ページ内にレベルが多すぎる場合、必ずしも -1 が最後にあるとは限りませんが、意味がありません。 -100 のような大きな数値で書かれている場合。背景画像のように見えるようにするには、index:-10 を使用します。これは実際には最も一般的な p ですが、背景画像のように見えるように階層関係が変更されています。

background-repeat: no-repeat;

ログイン後にコピー

上記は背景です、繰り返さないでください

background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;

ログイン後にコピー

上記の3つの文は同じ意味で、画面サイズに同期して画像を拡大縮小するというものですが、一部の部分は同じである可能性があります以下の 2 つの文は、Chrome および Opera ブラウザとの互換性のためのものです。

background-position: center 0;

ログイン後にコピー

上記の文は、画像の位置を中央揃え、左揃えという意味です。