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://upload-images.jianshu.io/upload_images/3100736-be3c0495c116dd76.png") no-repeat;
- }
- .stop{
- width: 36px;
- height: 36px;
- background: url("https://upload-images.jianshu.io/upload_images/3100736-be3c0495c116dd76.png") -36px 0px no-repeat;
- }
- .play{
- width:36px;
- height: 36px;
- background: url("https://upload-images.jianshu.io/upload_images/3100736-be3c0495c116dd76.png") -75px 0 no-repeat;
- }
效果:
经典前端面试题每日更新, 欢迎参与讨论, 地址: https://github.com/daily-interview/fe-interview.
来源: http://www.jianshu.com/p/7481d0247e36