css sprite（精灵图）的 定位和缩放 详解

css sprite（精灵图）的 定位和缩放 详解

• 项目演示

1.定位

      background-position;

2.缩放

      background-size;

• 注意（常见误区）! :
        1.必须使用backgroud-url()进行图片的引用，而不能使用<img src="">。
        2.缩放图片是对整个图片的缩放，所以顺序应为先缩放再定位，比如我想获得精灵图上购物车的图片，在再将图片缩小为3/4，应该将先整个图片的大小100px25px,缩小为75px19px,然后定位到56px*14px。

代码：

.basic{background-image:url(../../assets/img/tabbar/tabbaricon.png);width:27px;height:27px;background-repeat:no-repeat;background-size:108px;display:inline-block;margin-top: 3px;vertical-align: middle;}.sprite1{background-position: 0px 0px;}.sprite2{background-position: -27px 0px;}.sprite3{background-position: -54px 0px;}.sprite4{background-position: -81px 0px;}