注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

左岸

web前端

 
 
 

日志

 
 

CSS Sprites,如何来规划?  

2014-02-11 15:31:34|  分类: css |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

先看一张图:

CSS Sprites,如何来规划? - sssxiaoliya - 左岸


一个页面一般会加载多少张css背景图?
一般会有哪几种类型的雪碧图?
雪碧图的尺寸该设置多大?如何排列?
雪碧图在站点中如何分布?

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

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

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

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

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

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

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

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

按实现方式:


固定尺寸雪碧图:按钮、图标、其它固定尺寸背景图、颜色鲜艳且尺寸较大的背景图
横铺雪碧图:横铺背景图、左右自适应背景图(不使用九宫格的实现方式)
竖铺雪碧图:竖铺背景图、上下自适应背景图(不使用九宫格的实现方式)
横竖平铺背景图:这种图不能合成雪碧图,一般用于网页背景花纹,大部分站点比较少出现

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

CSS Sprites,如何来规划? - sssxiaoliya - 左岸

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

CSS Sprites,如何来规划? - sssxiaoliya - 左岸

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

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


 横铺图宽度使用20px, 使用1px宽度横铺会有渲染性能问题,竖铺同理。我就不详细说明了,网上搜索,有相关示例。
固定尺寸的雪碧图一般可设定为宽度是网页宽度的一半,高度随图片内容增长。因为切图前你可能不确定用多大尺寸,我的见解是,到切图后期你可能不需要单独用一张repeat-x.png的图放左右自适应的背景图,多数情况我们会用2个标签采用滑动门的方式实现左右自适应的背景,而页面宽度的一半即可实现最大宽度的左右自适应背景,那么这时你可以把左右自适应的背景放进这张雪碧图中了
拼合图片时固定尺寸的图与图之间相隔1像素,避免浏览器放大时,尺寸多计算1像素时可见到临近的图片
栏目级雪碧图的名称按栏目级目录名命名,页面级雪碧图的名称按页面名称命名,组件类和皮肤类雪碧图同理,其它的可按表中的名称命名,这样方便区分和后期管理
跨项目通用的组件或某个组件的图片内容较多、修改频繁,可以独立出一张组件图,按组件名命名,方便管理
如果站点的全局图标比较多,可以考虑将图标单独做一张雪碧图
建议图标使用一个新标签实现,而不是直接用有内容的那个标签设定图标背景,这样你需要给雪碧图图标与图标之间多留一些间距,另外遇到不同行高的时候,为了让图标背景垂直居中,还需要重新设定background-position,这种实现方式不利纳入全局样式

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

  评论这张
 
阅读(51)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017