CSSは背景画像の画面適応を実現する

ログインページなどのホームページを作成する場合、大きな背景画像を配置する必要があり、さまざまな画面のサイズに合わせて画像を比例して拡大縮小する必要がある状況に遭遇することがよくあります。

HTML コードは次のとおりです。

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <meta http-equiv="X-UA-compatible" content="ie=edge">
    <link rel="stylesheet" href="../css/login.css"><!-- 私の CSS コード パス -->

    <タイトル>。 。 。 </タイトル>
</head>

<本文>
    <div class="bgimg">
</本文>

</html>

CSS コードは次のとおりです。

.bgimg{
    位置:固定;
    上: 0;
    左: 0;
    幅:100%;
    高さ:100%;
    最小幅: 1000px;
    zインデックス:-10;
    ズーム: 1;
    背景色: #fff;
    背景: url(../img/bg_login.jpg) 繰り返しなし;
    背景サイズ: カバー;
    -webkit-background-size: カバー;
    -o-background-size: カバー;
    背景位置: 中央 0;
}

CSS コードの役割を分析します。

位置:固定;
上: 0;
左: 0;

これらの3つの文は、div全体を画面の上部と左側に固定します。

幅:100%;
高さ:100%;
最小幅: 1000px;

上記の最初の 2 つの文は、div 全体を画面と同じサイズにして、フルスクリーン効果を実現します。 min-width の目的は、画面の幅が 1000 ピクセル以内の場合に div のサイズが変更されず、画像が拡大縮小されないようにすることです。

zインデックス:-10;

この目的は、HTML ページの各レベルの下側に div 全体を配置することです。通常、デフォルトで作成されるレベルの z-index 値は 0 なので、ここに -1 と書いても実現できます。ただし、ここに -10 と書いておくと、div 全体が一番下に配置されます。ページ内のレベルが多すぎると、-1 を使用しても必ずしも一番下に配置されないことがあります。ただし、-100 のような大きな数字を書いても意味がありません。 -10 を使用すると、背景画像のように見せることができます。実際にはごく普通の div ですが、階層関係が変わって、背景画像のように見えます。

ズーム: 1;

ズームは、IE6 専用に機能する CSS ハックの一部です。 IE6 ブラウザは、オブジェクトのズーム比を示すために zoom:1 を実行します。 IE6、IE7、IE8 ブラウザと互換性があり、よく問題が発生することがありますが、zoom:1 を使用して解決できます。zoom には次の機能があります: 1. IE ブラウザの haslayout をトリガーします。 2. IE でのフローティングやマージンの重なりなどの問題を解決します。

背景繰り返し: 繰り返しなし;

写真はタイル状に並べられており、重複していない

背景サイズ: カバー;
-webkit-background-size: カバー;
-o-background-size: カバー;

上記の 3 つの文は、いずれも同じ意味です。つまり、画像を画面サイズに合わせて拡大縮小しますが、一部が切り取られる場合がありますが、露出されることはありません。次の 2 つの文は、Chrome および Opera ブラウザとの互換性を保つためのものです。

背景位置: 中央 0;

上記の文は、画像の位置を中央揃え、左揃えにすることを意味します。

効果は以下のとおりです。

1000pxより大きい場合: (スクリーンショットが大きすぎるため、画像を少し縮小しました)

1000px未満の場合:

元画像: (大きすぎるので少し縮小しました)

CSS で背景画像のスクリーン適応を実装する方法についての記事はこれで終わりです。CSS 背景スクリーン適応に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: JavaScript のマイクロタスクとマクロタスクの説明

>>: HTTP ヘッダー情報の解釈と分析 (詳細概要)