BinaryDevelop
  1. ホーム
  2. Web制作
  3. CSS

[CSSチュートリアル】背景画像画面の適応的な実装を実現するCSS

2022-01-15 02:44:50

ランディングページなどのホームページをやっていると、大きな背景画像を置く必要があり、様々な画面の大きさに合わせて画像を拡大縮小する必要がある場面によく遭遇します。

htmlコードは以下の通りです。 

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="... /css/login.css"><! -- my css code path -->

    <title>. </title>
</head>

<body>
    <div class="bgimg">
</body>

</html>

cssのコードは以下の通りです。 

.bgimg{
    position:fixed;
    top: 0;
    left: 0;
    width:100%;
    height:100%;
    min-width: 1000px;
    z-index:-10;
    zoom: 1;
    background-color: #fff;
    background: url(. /img/bg_login.jpg) 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は、画面の幅が1000px以内であれば、divを同じサイズにする、つまり、画像が拡大縮小されないようにするためのものです。 

z-index:-10;　　

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

zoom: 1;

zoom は、IE6 専用に動作する CSS ハックの部分です。IE6 のブラウザは、オブジェクトのスケールを示すために zoom:1 を実装しています。IE6、IE7、IE8のブラウザと互換性があり、zoom:1で解決できる問題にしばしば遭遇します。zoomには以下の効果があります。1. IEのhaslayoutをトリガーする。2. IEでのフロート、マージンのオーバーラップなどの問題を解決する。 

background-repeat: no-repeat;

画像はタイル状で、繰り返さない 

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

上の3つの文章は同じ意味です。つまり、画像は画面サイズに合わせて拡大縮小させますが、一部が切り取られることがありますが、白く表示されるほどではありません。次の2つの文章は、クロームとオペラのブラウザの互換性のためです。 

background-position: center 0;

上の文は、画像の位置、中央揃え、左寄せを意味します

効果は次のとおりです。

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

1000px 未満の場合。

オリジナルの画像です。(これもちょっと大きすぎて縮小できない)

背景画像画面適応のCSS実装について、この記事では、より関連するCSS背景画面適応の内容は、スクリプトハウスの過去の記事を検索してくださいまたは、次の関連記事を参照してください続けて、私はあなたが将来的に多くのスクリプトハウスをサポートして願っています！導入されています。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します