CSS Sprit制作的一些总结

CSS Sprit 是网站优化不可缺少的一部分，我就从首页的制作中总结了下面一些经验，以备以后使用。

1、使用高效快捷的工具！ Photoshop和Chrome。

　　Photoshop在CSS　Sprit的制作中至关重要，Photoshop使用时，把标尺和网格都显示出来，这个很有帮助，让你把图像精细到1个像素，这个对后来的调试很重要。

　　　　　　视图（V）--标尺（在标尺处点击右键，把单位改为像素）

　　　　　　　视图（V）--显示--网格

　　Chrome在调试中非常的好用，有智能补全，帮助你快速的书写CSS规则，Chrome在23以后，审查元素也有了标尺的功能，这个需要设置一下，在Setting-General-Elements-Show rulers. Chrome的主要作用就是调节background的position，也就是background-position, 这个的单位可以是百分比%和像素PX，百分比是一个粗略的值，在你的图片位置放的好的话，%也很好用，追求精细的话就要用到像素了，这个Chrome能帮你做到更好。

2、为你贴的图制定好高度和宽度

　　　　背景所在的层都会有他的高height和宽width，所以你要为你贴的图留够所需的宽高，比如，该层的尺寸是W*H=200px*30px 那么你要空出200px*30px给这个层，当然，你要经可能的把整张背景图片的宽高最小化，这个就要看自己的把握了。

<div class="top">
  <ul>
    <li class="1"></li>
    <li class="2"></li>
    <li class="3"></li>
  </ul>
</div>

　　上面的li是，我想他的前面背景是相应的数字，class="1" 的li  显示的是数字1，早这样，我们需要一张从上到下的1-10的图片。

　　现在li的高为30px宽为200px，那么我们在Photoshop作图的时候，取1-10数字图片，你可以把Photoshop放大到最大级别，最大级别下的方格是一个像素的正方体1px*1px，透明背景有灰白相间的正方体，是8px*8px的。   给每个数字的层高度30px，把数字放到等距离差的位置，标尺里面的辅助线能帮助到你。 在放贴图的之后，最好能放在边缘，这个容易调试。

3、最后保存

　　存储为WEB所用格式，经过比较，gif和jpg都比png-8的要大，我们一般做的都是透明的背景，jpg不支持透明，直接忽略，png-24的大，所以就只有gif和png-8的了，chrome的PageSpeed建议我使用的是png-8,尽管png-8在IE6里面不能透明，但是对于背景来说，影响不大。　

总结：

　　　把Photoshop放大到1px级别，作图是一件很快乐的事情。