控制背景图片大小的属性介绍:
属性:background-size: ;
值:
contain | 等比例缩放,背景图片显示完整,有可能铺不满盒子 |
cover | 等比例缩放,铺满盒子,背景图片有可能显示不完整 |
写2个值:
第一个值代表宽,第二个值是高度.
- px单位
- 百分比% 注:参考的是盒子的百分比
注意:只写一个值,代表宽,另一个值默认auto,高度等比例缩放
控制背景图片大小属性的使用:
background-size: cover;
background-size: 300px 200px;
background-size: 50% 50%;
background-size: 100px auto;
背景属性的连写:
注:背景尺寸的连写前面必须有背景定位的值 背景定位/ 背景尺寸
background: #ccc url(./img/li.jpg) no-repeat 0 0 / 100px 200px;