实例：background-position定位

实例：background-position定位

---

我们在写页面时经常会用到小图标，例如酱紫的[红色框内图标]!

我们使用的时候有的下载好是单个的矢量图，但是也有下载的是这样的模板矢量图!

场景：我们现在需要用到上图中灰色背景的垃圾箱小图标。
1.首先需要用工具量出小图标的大小，推荐工具是markman markman下载地址，和Photoshop CC，我这边测出长是17px，宽是15px
2.直接写定位

.pic-6 {
        width: 15px;
        height: 17px;
        background: url("images/toolbars.png") no-repeat 100% 100%;
        background-position: -48px -198px;
    }

网页内出来下图结果：

那么这里的 background-position如何得到是-48px和-198px；
我们在ps中可以测量到从左上角顶点到“垃圾桶图标”左上角顶点的长和宽

因为是在左上角顶点的右下方，所以要想找到“垃圾桶图标”必须是把量到的48px和198px减去，也就是 -48px -198px，
根据position-position：x y ；
我们填入进去就行了~ position-position：-48px -198px ；