我的前端学习笔记9.2——css字体图标及常见样式

1，CSS Sprite(雪碧图|精灵图)指什么? 有什么作用?

css sprite指的是一些图片（多为图标）拼接在一起的图片。
作用：可以在不用数据请求的前提下，只是通过位置的定位来实现不同需求的不同图片展示。

利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
CSS Sprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。
决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。
更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便。

2，img标签和CSS背景使用图片在使用场景上有何区别?

img标签适合图片不固定的情况，比如广告图片，不确定一直会是一样的图片；
css背景使用图片适合图片固定，不轻易改变的情况，比如图标等。

如下场景使用img标签比较合适：

如果图像是等内容的一部分或图表或人，使用Img标签加上alt属性。
如果需要打印页面并且默认情况下打印图片则使用IMG。
使用IMG(alt文本)图像有一个重要的语义时,比如一个警告图标。这将确保图像的意义可以很好的和user-agents沟通,包括屏幕阅读器。
如果你依赖于浏览器缩放图像比例并且可以呈现不错的效果时使用IMG。
如果配合 z - index 伸展背景图像来填补它的整个窗口时使用IMG。
使用img代替有背景图像可以显著提高性能的动画背景。

如下场景使用background-image属性比较合适：

如果图像不是内容的一部分时使用backgrond-image。
当图像代替文本使用时使用backgrond-image。
如果你想打印页面并且你不想要的图像包括默认情况下使用backgrond-image。
如果需要缩短下载时间通过CSS sprites 时使用backgrond-image。
如果你只需要展示图像的一部分通过CSS sprites时使用backgrond-image。
如果你需要为不同的屏幕分辨率展示不同的图像使用 media查询时使用backgrond-image。