语法
background-size: length|percentage|cover|contain;
| 值 | 描述 |
|---|---|
| length | 设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动) |
| percentage | 将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)" |
| cover | 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。 |
| contain | 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。 |
实例
指定背景图像的大小：
htmlcss
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<div class="div5"></div> div{
height: 200px;
width: 150px;
margin: 30px;
border: black 2px solid;
}
.div1{
background: url('http://jiuaibuni.top/wp-content/uploads/2020/12/77-150x150.png');
background-size:150px 150px;
}
.div2{
background: url('http://jiuaibuni.top/wp-content/uploads/2020/12/77-150x150.png');
background-size:contain;
}
.div3{
background: url('http://jiuaibuni.top/wp-content/uploads/2020/12/77-150x150.png');
background-size:cover;
}
.div4{
background: url('http://jiuaibuni.top/wp-content/uploads/2020/12/77-150x150.png');
background-size:200px 200px;
}
.div5{
background: url('http://jiuaibuni.top/wp-content/uploads/2020/12/77-150x150.png');
background-size:100% 100%;
}
Comments | NOTHING