1.1精灵图:
使用步骤:
1.创建一个盒子,设置盒子的尺寸和小图尺寸相同
2.将精灵图设置为盒子的背景图片
3.修改背景图位置
精灵图的标签一般都用行内标签,如span,b,i;
背景图位置属性:background-position:水平 垂直;
(左侧和上则为负数,右侧和下侧为正数)
2.1 背景图片大小
属性名:background-size:宽度 高度;
取值:
1、数字+px
2、百分比(相对于当前盒子自身的宽高百分比)
3、contain (包含,将背景图片等比例缩放,直到不会超出盒子的最大)
4、cover (覆盖,将背景图片等比例缩放,直到刚好填满整个盒子没有空白,意味着图片的部分内容会看不到)
如果盒子和图片都是等比例的,选择contain 和 cover 都是一样的
盒子里的图片只出现一张:background-repeat:no-repeat;
2.2 background连写拓展:
background:color image repeat position/size;
<