提高网页显示速度最有效的一个方法是减少页面的HTTP请求次数,为了减少HTTP请求次数,最直接有效的方法是使用精灵图片(CSS sprites),精灵图片是把许多图片放到一张大图片里面,通过CSS来显示图片的一部分。

不要等你完成所有工作后再开始使用CSS精灵(我就是通过YSlow分析页面性能之后才想起来没用精灵。)

在网站全部完成后,你的CSS和图片也都已经创建好了,这时候你再使用CSS精灵,也就意味着你要返回重写CSS,并且还要把用到的一大堆图片再丢到Photoshop里拼合成一张图片,这是非常痛苦和乏味的。如果在刚开始构建页面时就着手使用CSS精灵,那么一切都会变得简单。

按图片显示相反的方向放置图片

这一条有点难以理解,假如一张图片应该出现在一个元素的左边,请将这张图片放在精灵的右边。用这种方式处理后,当你用CSS移动背景图片时,不可能会有别的图片会(错误的)显示处理。

避免在CSS使用bottom或right定位

当定位CSS精灵中靠后的图片时,使用类似background-position: bottom -300px; 或者 background-position: right -200px;的方式定位非常容易。最初,这一切都能正常工作,但是,一旦你的CSS精灵宽度或高度增加时,你刚才使用的定位方式就发现了错误,因为图片相对右边或者底边的距离已经发生了变化。所以,请使用left和top来定位。

为每张图片留出足够空隙

正如你所看到文章中提供的例子精灵图片一样,许多小图片间都预留了很多空白。为什么不把图片挤得紧凑点让精灵图片尺寸更小点呢?因为使用元素的地方可能包含各种不同的内容,这些内容会导致容器变宽变高,预留了足够的空白的话,在容器大小发生变化时,可以避免其他的图片显示出来。

无需担心CSS精灵的尺寸大小

如果你有机会以标准的web设计来设计你的网站,那么你必定要将把很多图片放到精灵图片上,并且为这些图片预览出合适的空隙,这很好。精灵图片中的空白空隙不会增加太多文件的体积,在addons.mozilla.org网站上使用的精灵图片尺寸是1,000×2,000,但它仅16.7kb!

.bg_sprite{background-image:url(/整图地址); background-repeat:no-repeat}

  引用该类,然后在元素中逐一定义背景坐标,以下为关键属性:
  #ico1 {width:容器宽度;height:容器高度;background-position:X坐标 Y坐标}
  #ico2 {width:容器宽度;height:容器高度;background-position:X坐标 Y坐标}
  #ico3 {width:容器宽度;height:容器高度;background-position:X坐标 Y坐标}
  .nav {width:容器宽度;height:容器高度;background-position:X坐标 Y坐标}
  必须要限定容器大小符合背景图元素位置,另外,XY轴是相对于整张图片的左上角来算的,所以取值一定要算清楚。

css sprite的使用心得的更多相关文章

  1. css sprite,css雪碧图生成工具V3.0更新

    V3.0主要改进 1.增加了单独添加单张图片以及删除单张图片的功能 2.增加了生成.sprite文件用以保存雪碧图信息 3.增加了打开.sprite文件功能 什么是css sprite CSS spr ...

  2. css sprite 调整大张图片中小图标的大小

    直接说解决方法: 假设一张拼合好的大图大小是:900 x 1000 px (如上图) 现在想取图中左上角的河马图标,并缩小图标的大小. 正常取图: .sprite { background: url( ...

  3. HTML CSS SPRITE 工具

    推荐一个CSS SPRITE工具 网盘分享:http://pan.baidu.com/s/1sjx7cZV

  4. CSS Sprite雪碧图应用

    在写网页过程中,会遇到这种需要使用多个小图标: 如上图中的「女装」文字左边的图标.容易想到的解决方法是为每张图片加入<img>标签,但这样做会增加HTTP请求数量,影响网站加载速度.比这更 ...

  5. CSS雪碧,即CSS Sprite 简单的例子

    CSS Sprite生成工具 http://pan.baidu.com/s/1gdGQwiJ 工具可将多幅图片整合一张,并生成CSS. HTML代码 <style> .img{backgr ...

  6. 使用compass自动合并css雪碧图(css sprite)

    本文转载自: 使用compass自动合并css雪碧图(css sprite)

  7. CSS Sprite 图标

    HTML <body> <!-- ul.sprite>li*5>s.s-icon+a{CSS Sprite} --> <!-- 以上是Sublime Text ...

  8. CSS Sprite 雪碧图制作

    CSS Sprite 雪碧图,简单来说就是: 为了提高网页的性能,减少加载次数,将一些不会经常随网站内容变化的小图标,集中放在一张大图上,将该图应作为background-image 嵌入页面中,在需 ...

  9. CSS Sprite的优缺点分析

    目前大多数的开发人员对这个技术都有相当地掌握,也有很多关于它的教程和文章.几乎所有的文章中都宣称设计师和开发人员都应该使用 CSS sprite 来减少 HTTP 请求数,并且节省一些流量.这个技术被 ...

随机推荐

  1. Highcharts属性介绍

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  2. 关于mac地址的一点感想

    因为怕mac地址冲突导致环路影响,所以修改了本地设备的mac地址.地址修改为 77:77:77:00:22:11, 结果导致 wlan0 下发不下来. 查看配置选项/etc/config/wirele ...

  3. 杭电OJ--自行车计速器

    Biker's Trip Odometer Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Ot ...

  4. UltraEdit-32文本编辑器软件 23.20.0.28 中文版

    软件名称: UltraEdit-32文本编辑器软件软件语言: 简体中文授权方式: 共享软件运行环境: Win 32位/64位软件大小: 21.5MB图片预览: 软件简介:UltraEdit 是一个功能 ...

  5. 使用android的mediaplayer做成 一个demo,欢迎测试使用

    附件是为一个定制视频产品而简单的写了一个demo,用来说明android的mediaplayer是如何使用的. http://files.cnblogs.com/guobaPlayer/palyerD ...

  6. Linux_jdk

    先查看下 yum list java* yum install java-1.7.0-openjdk* -y 环境变量应该是会自动配置的 或者手动配置编辑/etc/profile #vi /etc/p ...

  7. uiwebview 加载html时字体变小 加载前或加载后改变字体大小

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Menlo; color: #6122ae } p.p2 { margin: 0.0px 0. ...

  8. C 小问题集锦

    摘要:在学习 C 语言编程中遇到的一些容易混淆出错的问题,记录下来备忘. C语言学习 小问题集锦 作者:乌龙哈里 时间:2015-11-24 平台:Window7 64bit,C# :Visual S ...

  9. java基础之操作符

    一:赋值 1.对基本数据类型的赋值,int a=b:   //把b的值复制给a,如果修改了a的值,b 的值不会受到影响. 2.对引用类型的赋值, public class Text { public ...

  10. rxJava rxandroid 学习

    学习地址 很全面: http://blog.csdn.net/meegomeego/article/details/49155989 final String[] words = {"Hel ...