站内搜索

CSS Sprites,如何来规划?_html/css_WEB

CSS Sprites,如何来规划?


一个页面一般会加载多少张css背景图?


一般会有哪几种类型的雪碧图?


雪碧图的尺寸该设置多大?如何排列?


雪碧图在站点中如何分布?


是否曾经烦恼过以上几点问题?带着上面几点问题,我们一起来探讨站点的雪碧图该如何规划比较合理。


首先让我们回忆一下,以前切页面时,会用到哪些类型的素材图?


我努力的想…努力的想啊…大概有:按钮、图标、其它固定尺寸背景图、横竖平铺背景图、横铺背景图、竖铺背景图、左右自适应背景图、上下自适应背景图、颜色鲜艳且尺寸较大的背景图。


好像有点乱,让我们分下类。


按雪碧图使用的作用域可分为:跨项目通用、全局、栏目级、页面级


按雪碧图实现方式可分为:固定尺寸雪碧图、横铺雪碧图、竖铺雪碧图(比较少用)、横竖平铺背景图(比较少用)


那么,再把我们回想的素材图归下类:


按作用域:这些素材在不同站点都有可能出现在不同作用域中


按实现方式:


固定尺寸雪碧图:按钮、图标、其它固定尺寸背景图、颜色鲜艳且尺寸较大的背景图


横铺雪碧图:横铺背景图、左右自适应背景图(不使用九宫格的实现方式)


竖铺雪碧图:竖铺背景图、上下自适应背景图(不使用九宫格的实现方式)


横竖平铺背景图:这种图不能合成雪碧图,一般用于网页背景花纹,大部分站点比较少出现


最后,从站点的可实现性上考虑,我们该做多少张雪碧图?请看下面这张表:


从表中可以分析出,一个页面的背景图的请求数为:


看到最最多的情况,是不是震惊了?呵呵,其实很少会发生全部用的情况,根据页面实际情况组合使用,请求的个数不会很多,跟第一张图例的背景图请求数相比,规划清晰很多,请求数也减少很多了。


这些图该如何切、如何分布、命名,有没什么讲究?以下是我个人的观点和建议:


横铺图宽度使用20px, 使用1px宽度横铺会有渲染性能问题,竖铺同理。我就不详细说明了,网上搜索,有相关示例。


固定尺寸的雪碧图一般可设定为宽度是网页宽度的一半,高度随图片内容增长。因为切图前你可能不确定用多大尺寸,我的见解是,到切图后期你可能不需要单独用一张repeat-x.png的图放左右自适应的背景图,多数情况我们会用2个标签采用滑动门的方式实现左右自适应的背景,而页面宽度的一半即可实现最大宽度的左右自适应背景,那么这时你可以把左右自适应的背景放进这张雪碧图中了


拼合图片时固定尺寸的图与图之间相隔1像素,避免浏览器放大时,尺寸多计算1像素时可见到临近的图片


栏目级雪碧图的名称按栏目级目录名命名,页面级雪碧图的名称按页面名称命名,组件类和皮肤类雪碧图同理,其它的可按表中的名称命名,这样方便区分和后期管理


跨项目通用的组件或某个组件的图片内容较多、修改频繁,可以独立出一张组件图,按组件名命名,方便管理


如果站点的全局图标比较多,可以考虑将图标单独做一张雪碧图


建议图标使用一个新标签实现,而不是直接用有内容的那个标签设定图标背景,这样你需要给雪碧图图标与图标之间多留一些间距,另外遇到不同行高的时候,为了让图标背景垂直居中,还需要重新设定background-position,这种实现方式不利纳入全局样式


以上是个人的一些经验和观点,仅供参考,大家对雪碧图的规划有什么好的建议和看法,欢迎留言一起探讨。

  • 上一篇:background
  • 下一篇:HTML 处理利器 PostHTML 入门教程_html/css_WEB