DIV CSS Sprites精灵 CSS图像拼合 CSS背景贴图定位教程案例

div css sprites精灵-CSS图像拼合 CSS贴图定位网页背景素材图片拼合定位布局技术教程篇与css sprites实例篇


css sprites拼合背景图片素材实现布局效果截图

一、什么是css sprites   -   TOP

css sprites直译过来就是CSS精灵。通常被解释为“CSS图像拼合”或“CSS贴图定位”。其实就是通过将多个图片融合到一张图里面，然后通过CSS background背景定位技术技巧布局网页背景。这样做的好处也是显而易见的，因为图片多的话，会增加http的请求，无疑促使了网站性能的减低，特别是图片特别多的网站，如果能用css sprites降低图片数量，带来的将是速度的提升。

css sprites是什么通俗解释：CSS Sprites其实就是把网页中一些背景图片整合拼合成一张图片中，再利用DIV CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片在布局盒子对象位置。

二、适合与不适合DIV CSS sprites拼合布局   -   TOP

1、适合：一般小图标素材
小的图标ico类素材，一般图标很小十多像素几十像素的宽度高度，这种适合拼合成一张图实现sprites background背景定位布局。多小ico太多自然加载网页时瞬间会消耗些http iis链接数，但很快加载完又会释放。

2、不适合：大图大背景
大背景一般用于网页背景，拼合时，设置为网页背景时所有背景都会显示出来。大图拼接拼合会增大图片大小，网络带宽不好的访问者访问时由于背景图大文件大会加载稍慢些，所以大图不推荐拼接拼合来使用css sprites背景定位布局。

3、sprites适合推荐小结
一般此sprites拼合布局用于局部小盒子布局不适合大背景大布局背景使用。比如小局部布局小图标背景、小导航背景等DIVCSS布局。

三、div css sprites优势与缺点劣势判断选择   -   TOP

1、sprites优势：
若干小图标拼合成一张图后布局，减少http iis请求数，对于大战大流量网站来说隐形优势很显然的，从而隐形地提升了网站性能。对于大流量网站来说本来http请求数比较宝贵，使用DIV+CSS Sprites这样可以大大的提高了页面的性能，这是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因，同时也减少图片文件数目。

2、sprites缺点
在图片合并的时候，你要把多张图片有序的合理的合并成一张图片，还要留好只够的空间，防止板块内不会出现不必要的背景，如果留空间或拼合位置不合适，在布局时容易出现布局这个盒子对象时，设置背景出现拼合相邻图片，干扰图片的情况;

CSS Sprites在开发的时候比较麻烦，你要通过photoshop(PS)或其他工具测量计算每一个背景单元的精确位置，这是针线活，没什么难度，但是很繁琐;

CSS
Sprites在维护的时候比较麻烦，sprites是一般双刃剑，如果页面背景有少许改动，一般就要改这张合并的图片，无需改的地方最好不要动，这样避免改动更多的css，如果在原来的地方放不下，有只能（最好）往下加图片，这样图片的字节就增加了，因为每次的图片改动都得往这个图片删除或添加内容，显得稍微繁琐，而且重新算图片的位置（尤其是这种上千px的图）也是一件颇为不爽的事情

由于图片的位置需要固定为某个绝对数值，这就失去了诸如center之类的灵活性。

3、DIVCSS5推荐小结
犹豫拼接图片需要一定经验技巧（做实践即可快速掌握）、测量定位数值、修改不是那么灵活等原因，一般小网站站、小流量网站、一般企业网站不是很推荐使用CSS
Sprites，因为使用CSS
Sprites会比普通单个背景图片布局要耗费时间和精力，所以不是很推荐小站。但这个布局技巧也必须要学会掌握灵活布局才是目的。小站HTTP请求数丰富这点拼接其实也起不来什么优势反而会浪费宝贵时间。相反大网站大流量网站推荐使用，这样比较值得。

四、div css sprites实例示例教程   -   TOP

1、素材与要实现效果截图


拼合ico图标素材实现列表不同图标效果截图

2、sprites实例教程解释介绍
首先这些图标素材是放在同一张图片上（PS拼合），然后实现成列表类布局，列表每个前图标不同。使用div css sprites实现此布局（其实使用background样式实现）。

首先此列表布局我们使用ul li列表布局，每个li站一行排版，对ul设置padding实现四周内容与边框一定间距效果，因为每个li前面图标不同，但此背景图片是拼合在一张图片上，所以这里做li里开始使用span标签实现这个不同图标效果，每个图标不同为了区别span所以对span设置不同class，不同class对应设置定位相应的图标。

3、实例教程准备
1）、初始化模板使用：为了兼容各大浏览器，仍然这里使用DIVCSS5提供初始化模板，在此模板基础上修改设置符合本实例CSS样式。
2）、图标素材，这里直接为大家提供拼接好的图标素材图片一张，命名为“ico.png”，如下图，可直接另存为保存使用。


sprites案例图片素材（直接点击图片鼠标右键可以另存为保存使用）

4、先布局出效果，再css sprites设置不同背景图标样式
1)、关键html代码：

  1. <ul class="Sprites">
  2. <li><span class="a1"></span><a href="#">WORD文章标题</a></li>
  3. <li><span class="a2"></span><a href="#">PPT内容标题</a></li>
  4. <li><span class="a3"></span><a href="#">Excel内容标题</a></li>
  5. <li><span class="a4"></span><a href="#">PDF内容标题</a></li>
  6. <li><span class="a5"></span><a href="#">文本文档标题</a></li>
  7. </ul>

为了区别不同效果对span加入不同class。
2）、关键CSS代码

  1. ul.Sprites{ margin:0 auto; border:1px solid #F00; width:300px; padding:10px;}
  2. ul.Sprites li{ height:24px; font-size:14px;line-height:24px; text-align:left; overflow:hidden}
  3. ul.Sprites li span{ float:left; width:17px;padding-top:5px;height:17px;
  4. overflow:hidden;background:url(ico.png) no-repeat}
  5. ul.Sprites li a{ padding-left:5px}

3）、效果截图


未使用sprites技术引入背景图片效果截图

4）、使用css sprites设置定位背景完整关键CSS代码

  1. ul.Sprites{ margin:0 auto; border:1px solid #F00; width:300px; padding:10px;}
  2. ul.Sprites li{ height:24px; font-size:14px;line-height:24px; text-align:left; overflow:hidden}
  3. ul.Sprites li span{ float:left; width:17px;padding-top:5px;height:17px;
  4. overflow:hidden;background:url(ico.png) no-repeat}
  5. ul.Sprites li a{ padding-left:5px}
  6. ul.Sprites li span.a1{ background-position: -62px -32px}
  7. ul.Sprites li span.a2{ background-position: -86px -32px}
  8. ul.Sprites li span.a3{ background-position: -110px -32px}
  9. ul.Sprites li span.a4{ background-position: -133px -32px}
  10. ul.Sprites li span.a5{ background-position: -158px -32px}

最终实现浏览器效果测试效果图


div css sprites案例效果截图

5）、css sprites关键代码与解释

  1. ul.Sprites li span.a1{ background-position: -62px -32px}
  2. ul.Sprites li span.a2{ background-position: -86px -32px}
  3. ul.Sprites li span.a3{ background-position: -110px -32px}
  4. ul.Sprites li span.a4{ background-position: -133px -32px}
  5. ul.Sprites li span.a5{ background-position: -158px -32px}

首先对ul.Sprites li span引入背景
ul.Sprites li span{ background:url(ico.png) no-repeat} 给span设置css背景图片。
再分别对不同span class设置对于图标背景定位具体值
ul.Sprites li span.a1{ background-position: -62px -32px}设置背景图片作为对应盒子对象背景后向左“拖动”62px，向上“拖动”32px开始显示此背景图标
ul.Sprites li span.a2{ background-position: -86px -32px}设置背景图片作为对应盒子对象背景后向左“拖动”86px，向上“拖动”32px开始显示此背景图标
ul.Sprites li span.a3{ background-position: -110px -32px}设置背景图片作为对应盒子对象背景后向左“拖动”110px，向上“拖动”32px开始显示此背景图标
ul.Sprites li span.a4{ background-position: -133px -32px}设置背景图片作为对应盒子对象背景后向左“拖动”133px，向上“拖动”32px开始显示此背景图标
ul.Sprites li span.a5{ background-position: -158px -32px}设置背景图片作为对应盒子对象背景后向左“拖动”158px，向上“拖动”32px开始显示此背景图标

关键：背景background-position有两个数值，前一个代表靠左距离值（可为正可为负），第二个数值代表靠上距离值（可为正可为负）
背景background-position有两个数值可以为正可以为负，当为正数时，代表背景图片作为对象盒子背景图片时靠左和考上多少距离多少开始显示背景图片；当为负数时代表背景图片作为盒子对象背景图片，将背景图片拖动超出盒子对象左边多远，拖动超出盒子对象上边多远开始显示此背景图片。

6）、背景图片定位数值获取
向左“拖动”，向上“拖动”这些这PS获取图文教程


利用切片工具获取对应小图标在图片文件中位置

通过ps软件利用切片工具画出要显示图片区域后，双击即可弹出“切片详细卡”，可以得到X（靠左距离值），Y（靠上距离值）即可获得对应图片素材在大图中位置。

五、在线样式与下载   -   TOP

1、在线样式

查看案例

2、打包下载

立即下载（5.969KB）

六、DIV CSS sprites技巧技术总结   -   TOP

CSS sprites其实就是对CSS背景background样式的扩展应用，以前设置背景background-position常见为正数值，设置背景靠左靠上距离多少像素开始显示图片，为负数值后，是将图片拖离左边上边多少像素开始显示图片，下载本案例多次修改修改数值，观察观察能找到规律很快就会作为此技巧，同时学会PS切片工具获取距离值。

时间： 2024-08-01 22:42:33

DIV CSS Sprites精灵 CSS图像拼合 CSS背景贴图定位教程案例的相关文章

CSS基本属性及sprite图像拼合技术

CSS基本属性: 文本 文字第一行缩进:text-indent:20px ; 字间距:letter-spacing:20px; 词间距:word-spacing:20px; 行高:line-height.他可以使数字.百分比.normal. 文本对齐:text-align.他的值可以是:left.center.right.justify(两端对齐). 垂直对齐:vertical-align:top.middle.bottom. text-shadow:水平值.垂直值.模糊半径.颜色.解释:在已设

CSS Sprites (CSS图像拼合技术)教程工具

什么是CSS Sprites? “Sprite”(精灵)这个词在计算机图形学中有它独特的定义,由于游戏.视频等画质越来越高,必须有一种技术可以智能的处理材质和贴图,并且要 同时保持画面流畅.“Sprite”就是这样一种技术,它将许多图片组合到一个网格上,然后通过程序将每个网格的内容定位到画面上. Sprite被定位到一副静态图片上,并且通过简单的程序或硬件即可正确定位到画面上,一幅幅图片就像是被“变”出来的,他们并没有单独占用内存,所以被取名为“Sprite精灵”. 上图是口袋妖怪的组合图片,可

CSS sprites(css精灵)

关于雪碧图(css sprites)网上已经有非常详细的介绍,比如百度百科,最简单的来说,CSS sprite即把网页中比较小的一些小图片整合到一张图片文件中,再利用CSS的background-image属性插入图片,然后利用background-position属性对图片所需要的部分进行精确定位,从而达到减少服务器请求次数的目的. 这里主要使用雪碧图实现一个最简单的小图标导航展示.具体代码可以见附件1,素材详见附件2,效果图详见附件3. 本例使用内部样式的方式对整个文档格式化处理,最核心的部

CSS Sprites(CSS精灵) 的优缺点

CSS Sprites 的优点:     1.减少图片的字节     2.减少了网页的http请求,从而大大的提高了页面的性能     3.解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命名就可以了,不需要对每一个小元素进行命名,从而提高了网页的制作效率. CSS Sprites 的缺点:    1.CSS Sprites在维护的时候比较麻烦,如果页面背景有少许改动,一般就要改这张合并的图片,无需改的地方最好不要动,这样避免改动更多的css,如果在原来的地方放不下,又只能(最好)往下

【转】CSS Sprites教程大全（使用方法、工具介绍）

什么是CSS Sprite CSS Sprite 又叫CSS精灵,是目前大型网站中经常运用的图片处理方式.它的原理很简单,将网站上零散的小图片(或图标)整合在一张大图上,再用CSS中“background-image”属性来定位图片的X/Y轴位置,从而减轻服务器对图片的请求数量,提高网页加载速度.因为对于当前大多数网速而言,不高于200KB的单张图片所需载入时间基本是差不多的,如果页面上有20张小图片或图标,那么服务器会载入20次.但使用CSS Sprite将图片整合成一张大图后,服务器只需要载

利用css sprites减少图片请求

sprites是鬼怪,小妖精,调皮鬼的意思,初听这个高端洋气的名字我被震慑住了,一步步掀开其面纱后发觉很简单的东西,作用却很大 什么是CSS Sprites CSS Sprites是指把网页中很多小图片(很多图标文件)做成按规律排列的一张大图上,在显示的时候通过background-image.background-position显示图片特定部分达到和分散的一张张小图片一样的效果. JqueryUI的效果图如下 很多页面常用的小图标,但是我们看看每个小图标的源码的时候会发现,这些小图标的src

CSS Sprites技术原理和使用

在分析各个网站的CSS时,我们经常可以看到一些网站有很多的元素共享了一张背景图片,而这张背景图片包含了所有这些元素需要的背景,这种技术就叫做CSS Sprites. 淘宝的css sprites 这样做有什么好处呢?我们做一个简单的实验:假设我需要有一个列表,每一行列表都需要一个自己的修饰符.如果使用普通的img来放置这些图片: <li><img src="img/01.gif" alt="img" /><a href="#&

Web优化 --利用css sprites降低图片请求

sprites是鬼怪,小妖精,调皮鬼的意思,初听这个高端洋气的名字我被震慑住了,一步步掀开其面纱后发觉非常easy的东西.作用却非常大 什么是CSS Sprites CSS Sprites是指把网页中非常多小图片(非常多图标文件)做成按规律排列的一张大图上,在显示的时候通过background-image.background-position显示图片特定部分达到和分散的一张张小图片一样的效果. JqueryUI的效果图例如以下 非常多页面经常使用的小图标.可是我们看看每一个小图标的源代码的时候

css sprite---css精灵网页图片应用处理方式分析

CSSSprites,在前端图片处理中经常用到的一种高效方法,下面参考百度百科的总结,非常到位,学习一下吧! CSSSprites在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了.对于当前网络流行的速度而言,不高于200KB的单张图片的所需载入时间基本是差不多的,所以无需顾忌这个问题. 1.CSS Sprites简介 加速的关键,不是降低质量,而是减少个数