背景图是一个装饰,作为替代背景色的一种装饰，一般我们把图标用背景图展示
语法
背景图使用background或者background-image进行定义
选择器 {
background: url(图片路径);
}
选择器 {
background-image: url(图片路径)
}
因为一般情况下CSS是单独存放在CSS文件夹中的,所以
- 外联 css 用背景图时写路径写 ../然后根据提示找图片
- 内联 css 用背景图时 写路径 ./ 然后根据提示找图片
默认情况下 如果背景图比较大,元素小,则会裁切图片。如果背景图小,元素大,则会重复图片
重复
剪切
如何控制是否重复
使用属性background-repeat可以控制图片是否重复
选择器 {
background-repeat: 属性值;
}
如何控制背景图的位置
使用background-position属性可以控制背景图的位置
选择器 {
background-position: x的值 y轴的值;
}
- 固定值 10px 20px
- 百分比
- 关键字
- x轴支持 left center right
- y轴支持 top center bottom
left指的时0% center是50% right是100%，同理top center bottom也是
两个值相同的时候，写一个即可。
当我们定义图片的位置时，如果时固定值，则指图片左上角的位置。
背景图居中
如果我们想要让背景图在元素中居中
- 图片大元素小，显示图片正中间
- 图片小元素大，图片显示在元素正中间
只需要给背景图位置设置center center或者 50% 50%即可
选择器 {
background-position: center;
}
选择器 {
background-position: 50%;
}
精灵图（雪碧图）
我们可以通过修改图片位置，来实现对应显示不同图片的内容效果。
所谓精灵图就是在一张图片上有很多小的不同的图片，我们利用background-postion在一个小的元素上，显示不同的图标，这种效果就叫精灵图
