CSS Sprite也叫CSS精灵、CSS雪碧图，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，由从前的多次请求变为一次请求。客户端每显示一图片都会向服务器发送请求，所以图片越多请求越多，造成延迟的可能性越大。所以页面有许多icon时，推荐使用CSS Sprite。
（3）解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。
调试方法:可以用浏览器自带的调试工具进行调试（如chrome浏览器按f12即可进行调试，慢慢移动background-position的值来达到理想的效果）
照片中有标记部分表情的位置为（0，0）；也就是说我们想要显示图中标记的表情只需将background-position设置为（0，0）即可！
下面问题来了，如果我们想显示其他表情，应该怎样调整图片的background-position呢？
注意点：我们在一个页面上设置了盒子的宽高，想要将一个表情显示在盒子内，我们是不能移动盒子的位置的，我们只能改变图片的位置。
操作步骤：将图片向左移X个单位，然后向上移Y个单位，其中XY的具体数值是需要个人调试至合适位置得出的！
Cutterman是一款运行在photoshop中的插件，能够自动将你需要的图层进行输出， 以替代传统的手工 导出web所用格式 以及使用切片工具进行挨个切图的繁琐流程。 它支持各种各样的图片尺寸、格式、形态输出，方便你在pc、ios、Android等端上使用。 它不需要你记住一堆的语法、规则，纯点击操作，方便、快捷，易于上手。
还原两步以上操作 【Ctrl】+【Alt】+【Z】重做两步以上操作 【Ctrl】+【Shift】+【Z】剪切选取的图像或路径 【Ctrl】+【X】或【F2】拷贝选取的图像或路径 【Ctrl】+【C】将剪贴板的内容粘到当前图形中 【Ctrl】+【V】或【F4】自由变换 【Ctrl】+【T】
用背景色填充所选区域或整个图层 【Ctrl】+【Del】用前景色填充所选区域或整个图层 【Alt】+【Del】
大家在网页中经常会见到这样一种导航效果,因为使用频率广泛,所以广大的程序员给它起了一个名字,叫做滑动门.在学习滑动门之前,首先你要了解什么是滑动门。
