ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS背景画像を適応させる方法
CSS背景画像を適応させる方法
- anonymityオリジナル
- 2019-05-28 15:06:488641ブラウズ
クリアで美しい背景画像は、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>
<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 サイトの他の関連記事を参照してください。