1. 云栖社区>
  2. 技术文集>
  3. 列表>
  4. 正文

CSS Sprites,如何来规划?

作者:用户 来源:互联网 时间:2016-03-11 11:58:02

页面图标尺寸背景图背景宽度固定组件背景固定背景

CSS Sprites,如何来规划? - 摘要: 本文讲的是CSS Sprites,如何来规划?, 先看一张图: 一个页面一般会加载多少张css背景图? 一般会有哪几种类型的雪碧图? 雪碧图的尺寸该设置多大?如何排列? 雪碧

CSS Sprites,如何来规划?-<a href=css sprites如何使用">

先看一张图:

CSS Sprites,如何来规划?-css sprites

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

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

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

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

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

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

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

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

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

按实现方式:

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

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

CSS Sprites,如何来规划?-css sprites 生成工具

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

CSS Sprites,如何来规划?-css sprites 在线工具

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

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

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


以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有 的相关内容,欢迎继续使用右上角搜索按钮进行搜索页面 , 图标 , 尺寸 , 背景图 , 背景 , 宽度 , 固定 , 组件背景 固定背景 css sprites如何使用、css sprites、css sprites 生成工具、css sprites 在线工具、postcss sprites,以便于您获取更多的相关知识。

ios-原始页面不变,修改子画面的高度

...高度 CGRect rect = CGRectMake(sprites.boundingBox.origin.x, sprites.boundingBox.origin.y, sprites.boundingBox.size.width, scale); 如何分配这个CGRect到CCSprite? float scale = sprites.boundingBox.size.height * 1.2; CGPoint point = CGPointMak...

CSS Sprites图片不清晰的问题(2倍的 CSS Sprites 如何缩放)

...后又会影响加载速度,在普通图片的时候我们可以用 CSS Sprites 比较完美的解决,但一张图片放好几个 2X 图片定位坐标的时候又会有一个缩放的问题,本文的重点就是解决这个问题。 实例图片 首先来看一下例子图片: 这里要...

为什么要提升web性能?

...本文件与样式表的请求图片的减少通常有两种方式:css sprites、内联图片、IconFont。CSS Sprites:将多张图片合并成一幅单独的图片,使用css的background-position属性,将html元素的背景图片放到sprites 图片中的期望位置上。使用这项技...

compass精灵图

...建share.scss文件,并写入以下代码: @import "compass/utilities/sprites";// 加载compass sprites模块@import "share/*.png";// 导入share目录下所有png图片@include all-share-sprites;// 输出所有的雪碧图css 命令行调用compass compile进行编译,此时会发现images...

手把手教你如何使用webpack 生成css sprites

...习一下如何使用 webpack 合并sprite图。 准备 webpack webpack-spritesmith 插件 file-loader sass-loader (因为 webpack-spritesmith 除了生成雪碧图之外,还会生成相应的 mixin ,使用起来很方便,所以要用 sass ) 这里我还使用了 ExtractTextPlugin 来提取...

前三篇
后三篇