CSS背景画像を適応させる方法-CSSチュートリアル-php.cn

CSS背景画像を適応させる方法

anonymity

リリース： 2019-05-28 15:06:48

オリジナル

8580 人が閲覧しました

クリアで美しい背景画像は、Web ページに多くのポイントを追加できます。デザイナーはページの背景に大きな画像を使用することがよくあります。解像度の違いによって画像が変形することは望ましくありません。この場合、背景に白い部分がありますが、これは簡単に言えば、変形せずに画面サイズに適応できる大きな背景画像を実現することであり、背景画像はスクロールしません。スクロールバーがスクロールするので、背景画像を調整できます。

CSS背景画像を適応させる方法

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>
<div class="wrapper">
    <!--背景图片-->
    <div id="web_bg" style="background-image: url(./img/bg.jpg);"></div>
    <!--其他代码 ... -->
</div>
</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;

ログイン後にコピー

これらの 3 つの文により、div 全体が画面の上部と左に固定されます

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

ログイン後にコピー

上の最初の 2 つの文フルスクリーン効果を達成するために、div 全体を画面と同じサイズにすることです。min-width は、画面幅が 1000 ピクセル以内の場合に div のサイズを変更しないようにします。つまり、この例では次に、画面幅を拡大縮小すると、画像は拡大縮小されません（1000px以内のみ有効）。

 z-index:-10;

ログイン後にコピー

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

 background-repeat: no-repeat;

ログイン後にコピー

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

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

ログイン後にコピー

上の 3 つの文は同じ意味で、画面サイズに合わせて画像を拡大縮小するというものですが、一部の部分が異なります。は切り取られる可能性がありますが、公開されません。次の 2 つの文は、Chrome ブラウザと Opera ブラウザとの互換性を考慮したものです。

 background-position: center 0;

ログイン後にコピー

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

以上がCSS背景画像を適応させる方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。