精灵图、favicon图标

精灵图

CSS Sprites 也称之为精灵图或雪碧图，是一种背景图片的应用处理方式，将很多小图片合并到到一张大图中去。把整个大图作为背景图，然后通过 background-position 属性将合适的图片显示到元素上。

目的：精灵图最大的作用是减少网络的请求次数，因为图片只要下载一次就好，不用再分别去下载那些小图。

使用：（1）精灵图主要针对于小的背景图片使用。

           （2）主要借助于背景位置来实现---background-position 。

           （3）一般情况下精灵图都是负值。（注意网页中的坐标： x轴右边走是正值，左边走是负值， y轴同理。）

（4）以原点为点，左上角对左上角的距离

制作精灵图：

在线工具：GoPng

favicon图标

favicon 图标 一般用于作为缩略的网站标志,它显示位于浏览器的地址栏或者在标签上，用于显示网站的logo，如图红圈的位置， 目前主要的浏览器都支持 favicon 图标。

favicon 图标文件一般命名为 favicon.ico， 是后缀为 .ico 的图片文件。

使用：

（1）把 ico 图标文件命名为 favicon.ico ,放在网站根目录下，网页会自动获取 ico 图标。

（2）在网页中使用 link 标签自行引入 ico 文件。

        <link rel="shortcut icon" type="images/x-icon" href="favicon.ico">

图标制作：

在线工具：①在线生成透明ICO图标——ICO图标制作

                  ②制作ico图标 | 在线ico图标转换工具 方便制作favicon.ico - 比特虫 - Bitbug.net