`

用DIV+CSS切割多背景合并图片 CSS Sprites 技术

    博客分类:
  • css
阅读更多
 

很久之前就在互联网网站和一些js插件中见过这种技术的应用,当时觉得很麻烦,就没有用,也没有去深究。


近段时间一直在做前台的一些东西,涉及到很多div+css的问题。这个东东我又碰到了,所以我花了点时间去网上了解了下其中的原理。原来这个叫CSS Sprites技术,主要是个人爱好啦,我对前台这些个东西比较感兴趣,所以会去了解多一点。

废话不多说,直接上我做的小例子:

 



这是一张多个小背景的图片合并而成的图片,当我们想要在页面上只显示其中我们需要的区域时,我们就需要将其“切”出来。

Java代码  收藏代码
  1. <style type= "text/css" >  
  2. .div_5758{  
  3. width:19px;  
  4. height:20px;  
  5. background: url("image/menu.png" ) no-repeat;  
  6. background-position:-71px -18px;}  
  7. </style>  

 

Java代码  收藏代码
  1. <div  class =div_5758></div>  


这段代码就是提取合并图片中那个红色叉叉图片。

 

这时候该想想我们为什么要这么做,这个东西百度一下,你就知道,我就简单讲下。

合并图片之后会减少图片的数量,进而减少了页面请求图片的次数,而当处于正常网络的情况下,不大于200KB的单张图片所需的载入时间是差不多的。这样的话,页面的加载效率就会调高。

 

技术永无止境,在此与各位共勉。

 

分享到:
评论

相关推荐

    变幻之美DIV+CSS

    自适应高度的滑动背景图片及背景图片设置技巧; ?如何解决IE6双倍边距bug; ?认识IE6、IE7特定选择器; ?margin-bottom失效情况的解决; ?将icon图标集成于一个图片文件; ?设置链接变换小图标的样式; ?一张...

    css sprites技术 CSS Sprites图片切割术与图片优化深入理解

    近段时间一直在做前台的一些东西,涉及到很多div+css的问题。这个东东我又碰到了,所以我花了点时间去网上了解了下其中的原理。原来这个叫CSS Sprites技术,主要是个人爱好啦,我对前台这些个东西比较感兴趣,所以...

    css sprites图片背景优化技术

    css sprites图片背景优化技术 ,多个背景在一张图上,提高网站访问效率,减少连接数。

    CSS Sprites 样式生成工具,快速定位背景图片

    CSS Sprites 样式生成工具(bg2css) 3.2.1 (需要AIR环境,可到 Adobe站点 下载安装。)

    CSS Sprites技术

    CSS Sprites技术bg2css_v3.2.1

    CSS Sprites 的小工具

    CSS Satyr(CSS 塞特斯)是一款 CSS Sprites 的小工具。可以将多个小图片整合成一张图片,并生成相应的CSS调用代码。支持批量添加图片/拖动排列/自动生成

    CSS Sprites

    CSS Sprites适合新手学习,介绍了怎么将多张图片做成一张图片都,通过CSS来调用

    CSS Sprites生成工具

    CSS Sprites生成工具

    css sprites把很多小图集成在一张图片上

    css sprites把很多小图集成在一张图片上 css sprites把很多小图集成在一张图片上 css sprites把很多小图集成在一张图片上 css sprites把很多小图集成在一张图片上

    css sprites

    css sprites 、css精灵 、css整合小图片工具,可以把网站中的小图片整合成一张图片,减小服务请求次数

    CSS sprites

    CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。

    CSS Sprites 样式生成工具(bg2css)

    CSS Sprites是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,也就是CSS Sprites(图片合并)技术。

    CSS Sprites实现图片分组动画效果

    CSS Sprites就是可以将许多图片集成在一张大图上,然后利用CSS的图片定位技术将其分割开来。这款CSS3图片效果就是可以将分割完的小图片实现分组的动画效果,我们只需要点击按钮即可切换到相应的分组状态,并伴随动画...

    CSS Sprites实例演示 代码

    CSS Sprites实例演示 CSS Sprites实例演示 CSS Sprites实例演示 CSS Sprites实例演示CSS Sprites实例演示 CSS Sprites实例演示

    css sprites样式生成工具 3.2.1

    程序名称:CSS Sprites 样式生成工具(bg2css) 主要功能:方便使用CSS Sprites时对图片生成样式 安装条件:需先安装Adobe的AIR环境AdobeAIRInstaller.exe,这个我也传到csdn空间了,可以搜索下!

    CSS Sprites样式生成工具.zip

    CSS Sprites样式生成工具.zip

    cssSprites

    css图片整合软件 cssSprites css图片整合软件 cssSprites

    CSS Sprites图片合并代码

    CSS Sprites的目的就是通过整合图片,减少对服务器的请求数量,从而加快页面加载速度

    css sprites工具 bg2css_1.4.1

    CSS Sprites 样式生成工具,准确定位输出图片的位置和大小

Global site tag (gtag.js) - Google Analytics