前端必备 CSS Sprites雪碧图如何使用

CSS Sprites又称css精灵或者谐音css雪碧，是一种网页图片应用处理方式，复杂的事情简单化，提高开发效率。

CSS Sprites将一个页面内所需要显示的图片全部整合到一张大图中，并使用css属性background进行调用。这样的话，当页面渲染时，可以减少请求次数，在一定程度上能够加快网页加载速度。

这并不是什么新鲜玩意了，但由于将小图整合到一张大图，又要准确的写出所需小图的background-position值，对于很多新手来说比较浪费时间，很多人只能放弃这个比较繁琐的步骤。

background-position 属性改变图像在背景中的位置：

基本用法

background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;  // right 为正数 图片向右移 为负数 图片向左移  top同理

eg:

原始图片：

.pause{
    width: 36px;
    height: 36px;
    background: url("https://img.haomeiwen.com/i3100736/be3c0495c116dd76.png") no-repeat;
}
.stop{
    width: 36px;
    height: 36px;
    background: url("https://img.haomeiwen.com/i3100736/be3c0495c116dd76.png") -36px 0px no-repeat;
}
.play{
    width:36px;
    height: 36px;
    background: url("https://img.haomeiwen.com/i3100736/be3c0495c116dd76.png") -75px 0 no-repeat;
}

效果：

---

经典前端面试题每日更新，欢迎参与讨论，地址：https://github.com/daily-interview/fe-interview。

---

更多angular1/2/4/5、ionic1/2/3、react、vue、微信小程序、nodejs等技术文章、视频教程和开源项目，请关注微信公众号——全栈弄潮儿。

微信公众号