CSS Sprites图片合并代码

  发布时间:2011-05-11 22:24:53   作者:佚名   我要评论
CSS Sprites的目的就是通过整合图片,减少对服务器的请求数量,从而加快页面加载速度


实现方法:

首先将小图片整合到一张大的图片上
然后根据具体图标在大图上的位置,给背景定位。

复制代码
代码如下:

.icons{background-position:-8px -95px;}

使用技巧:

小图片排列方面:颜色相近的图片放在一起,可以减少输出的色数,进一步降低文件体积。
整合图片生成方面:PNG8的图像比GIF图像要小30%左右
通过工具再压缩:fireworks生成的PNG比photoshop更小,而一些专用的压缩软件也可以让图片再小一些。

相关文章

  • css sprites技术将多个背景集成到一个png图片上css定位

    美国YAHOO在页面制作中所用到的图片整合技术,首先将小图片整合到一张大的图片上,然后根据具体图标在大图上的位置,给背景定位,感兴趣的朋友可以了解下具体的实现方法
    2013-04-02
  • 使用css sprites来优化你的网站在Retina屏幕下显示实现原理与代码

    CSS sprites(CSS图片精灵)已经存在很久了。事实上,八年前就有CSS Sprites的详细介绍。CSS Sprites为一些大型的网站节约了带宽,让提高了用户的加载速度和用户体验,不需要
    2012-12-24
  • css sprites技术 CSS Sprites图片切割术与图片优化深入理解

    近段时间一直在做前台的一些东西,涉及到很多div+css的问题,原来这个叫CSS Sprites技术,我对前台这些个东西比较感兴趣,所以会去了解多一点
    2012-12-03
  • 网页设计中的CSS Sprites技术介绍及其优化方法

    CSS Sprites 技术对于广大的前端工程师来说应该是一点也不陌生。这个被国内开发者昵称为CSS精灵 CSS雪碧的家伙到底解决了什么问题,我们又怎样合理使用这个技术呢?下面让我
    2012-05-31
  • 什么是CSS Sprites(图片合并)技术 图文介绍

    众所周知,减少网站加载时间的最有效的方式之一就是减少网站的HTTP请求数。实现这一目标的一个有效的方法就是通过CSS Sprites——将多个图片整合到一个图片中,然后再用CSS
    2011-06-21
  • CSS Sprite打造的个性化导航菜单代码

    最近在网上闲逛,然后发现了一个用css sprite技术打造的导航,颇为简便和易用。由于图片的切换没有用到任何js,所以显得干净整洁。具体想知道什么是css sprite技术的,可以
    2011-01-26
  • 使用CSS sprite 的好处和坏处分析

    无处不在的 CSS sptites - 为数不多的几个可以直接跳过”流行”这个过程,而可以马上并且牢牢地跻身于最佳 CSS 实践之中的几个技术之一。
    2010-04-17
  • CSS Sprite的一些最佳实践方法

    众所周知,减少网站加载时间的最有效的方式之一就是减少网站的HTTP请求数。实现这一目标的一个有效的方法就是通过CSS Sprites——将多个图片整合到一个图片中,然后再用CSS
    2009-09-16
  • CSS Sprite优化 减少HTTP链接数

    CSS Sprite 最大的好处是:减少 HTTP 链接数。提高页面质量
    2009-08-03
  • CSS Sprites 图片整合技术分析

    论坛上提到这样的问题:“css中用一张背景图做页面的技术有什么优势?” 简单介绍一下 CSS Sprites 的优点: 当用户往U盘中拷200张图片,会等很久。但是
    2009-06-21

最新评论