background-position图片定位

在编写静态页面时,我们经常会遇到这样的图片

这时,我们只需要图片的一部分

如果只是使用第一个小图片,我们直接设置宽高为小图片的宽高即可

.jd-service i{
    display: block;
    width:24px;
    height:24px;
    margin:15px auto 8px;
    background: url(../images/sprite_fs@1x.png) no-repeat;
}

但是如果需要使用其他的图片,那我们就要用到background-position属性了

　　该属性有两个值,第一个是水平位置,第二个是垂直位置

　　属性值可以使用left center right top bottom,也可以使用像素或者百分比

例如图1

　　给图片位置设置好宽高并调用后,再有如下设置,就可以定位并显示第二个字

.service_unit .kuai{
    background-position: 0 -44px;
}

偏移量长度可以是正值，也可以是负值。

x 为正值表示向右偏移，负值表示向左偏移；y 为正值表示向下偏移，负值表示向上偏移。

背景图像发生移动后，就有可能超出对象的背景区域。此时，超出的部分将不会显示，只会显示落入背景区域的部分。