背景画像のサイズを指定します
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ボックスは引き伸ばされなくなります。空白の領域がある場合があります。