背景图的使用

背景图是一个装饰,作为替代背景色的一种装饰，一般我们把图标用背景图展示

语法

背景图使用background或者background-image进行定义

选择器 {
  background: url(图片路径);
}

选择器 {
  background-image: url(图片路径)
}

因为一般情况下CSS是单独存放在CSS文件夹中的,所以

• 外联 css 用背景图时写路径写 ../然后根据提示找图片
• 内联 css 用背景图时 写路径 ./ 然后根据提示找图片

默认情况下 如果背景图比较大,元素小,则会裁切图片。如果背景图小,元素大,则会重复图片

重复

剪切

如何控制是否重复

使用属性background-repeat可以控制图片是否重复

选择器 {
  background-repeat: 属性值;
}

• repeat 默认值
• repeat-x 横向重复
• repeat-y 纵向重复
• no-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在一个小的元素上，显示不同的图标，这种效果就叫精灵图

鼠标移入显示不同的图片