技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置首页 --> 查看专题: Sprites
    在分析各个网站的CSS时,我们经常可以看到一些网站有很多的元素共享了一张背景图片,而这张背景图片包含了所有这些元素需要的背景,这种技术就叫做CSS Sprites。这样做有什么好处呢? 显而易见,浏览器在载入每一张图片的时候都会发起一个HTTP请求。 如果使用CSS Sprites技术,将所有的图片合成一张图片,那么,这样多个HTTP请求会被合成一个HTTP请求。 这样就既能大大降低后台服务器的开销,又能加快网页载入速度。 CSS Sprites原理: CSS Sprites是通过背景图片外加背景图片定位来实现的。
    Smashing Magazine 上面有一篇文章讨论了一下 CSS Sprites ,文章本身并没有否定这种技术的意思,但是提出了很多有价值的反面观点,做 Web Developer 的可以参考一下: 1. 浏览器默认会缓存所有的图片 2. CSS Sprites 要把很多图片组织在一起,会增加切图的工作量。 3. CSS Sprites 需要你编写很多定位代码,增加编码工作量。 4. 不容易维护。 5. 不是所有的图片都应该当做背景。很多时候要考虑到页面语义化,有些作为内容的重要图...
    SmartSprites(http://csssprites.org/)是一个基于java开发的命令行形式的CSS Sprites生成器。它根据CSS文件中的特别注释自动合成图片,然后自动替换原来的图片,最后生成一个新的CSS文件。显然比手工上传、下载,再手工修改CSS方便多了。它可以指定生成-个或多个sprites图片,要合并哪些图片也是由你指定的。这一点要比SpriteMe(http://spriteme.org/)好。SpriteMe本身不是开发阶段的工具。简单介绍一下怎么用:环境要求:...
    关于CSS Sprites技术的优化我们能做到多少,能减多少的请求数量。这并且不是单方面能做到的,一切取决于XHTML、CSS、CSS Sprites图片之间的配合。现时为止没有绝对优化的做法,这也是我在项目中经常衡量CSS Sprites图片与XHTML关系,如:《一张背景实现自适应九宫格》,以下总结了图片切割术与图象优化的一些方法。
[ 共4篇文章 ][ 第1页/共1页 ][ 1 ]
赞助商广告
© 2009 - 2024 by blogread.cn 微博:@IT技术博客大学习

京ICP备15002552号-1