css3学習---背景ズームbackground-size

背景画像のサイズを指定します

background-size: 背景图片宽度 背景图片高度;

単位:長さ|パーセンテージ(親ボックスに対する)|カバー|含む;
例:背景画像を赤い境界線のあるdivに配置します。設定されていない場合、画像の元のサイズが表示されます。
ここに画像の説明を挿入
コード:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
     
     
            width: 1000px;
            height: 600px;
            border: 1px solid red;
            /* 图片宽度是500*500 */
            background: url(imgs/girl.jpg) no-repeat;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>
  • 2つのパラメータを書き込みます:background-size:500px 800px;
  • パラメータを1つだけ書き込むと、幅と高さが省略され、比例してズームされます。
  • 単位は、親ボックスに対する%と比較できます
  • カバーはdivボックスを完全に覆うように引き伸ばされ、一部の背景画像は完全に表示されない場合があります
  • 含む高さと幅は比例して引き伸ばされます。幅または高さがいっぱいになると、divボックスは引き伸ばされなくなります。空白の領域がある場合があります。

カバー(100%に相当):

ここに画像の説明を挿入

含む

ここに画像の説明を挿入

おすすめ

転載: blog.csdn.net/pilgrim_121/article/details/111476034