网页图片整理术之CSS Sprite的应用

CSS Sprite 是一种图片的处理方式,它允许网页设计师将很多张图片合并在同一张图档中,然后根据 CSS 档中的文字描述将图档分区块加载,是现在很常见的网页图片处理方式。

例如网页上一个的按钮的三种变化效果的图片,将其顺序摆放在同一个图档中使用:

网页图片整理术之CSS Sprite的应用,PS<a href=/photoshop/ target=_blank class=infotextkey>教程</a>,

而这张是 Facebook 页面上所使用的小图标图档,像是大家最常看到的 Like 图标其实也只是从这张图片里面取出一小部分加以显示而已。

网页图片整理术之CSS Sprite的应用,PS教程,

诸如以上,几乎现在的网站都会透过使用 CSS Sprite 来将网页作优化,比起传统的切割图片方式,使用 CSS Sprite 有着以下的优点:

方便整理、命名:由于将图片合并了、图档的数量减少了,整理起来更为方便,同一个按钮不同状态的图片也不需要一个个切割出来并个别命名。

修改以及调整更为快速:由于每个按钮都在同一张图档中,设计师在事后修改细节时就可以在同一个档案中工作,再也不用辛苦的切割图档。

档案体积减小:虽然影响不大,但将图档合并可以有效的减少档案的体积。

网页图片整理术之CSS Sprite的应用,PS教程,