CSS Sprite(雪碧图|精灵图)指什么? 有什么作用？
- css sprites 是一种网页图片应用处理方式。主要是把网页中的多张小图片整合到一张大图片文件中，再利用CSS的background-position属性精确的定位出背景图片的位置。当访问该页面时，根据定位分别显示出分布在sprites大图片的小图片。
- 作用：通过将多个小图片合并到一张图上，减少网页加载时对服务器的请求次数，提高页面的性能。因为对于页面来说，每加载一次小图都是一次网络请求，当页面小图数量过多时，不断的网络请求对服务器和页面性能来说都是很大的负担。
img标签和CSS背景使用图片在使用场景上有何区别
- img标签属于html元素，具有和其他元素一样的特性，比如改变样式，增加网页效果，添加链接和条状等各种操作，多用于与文本内容相关的可变对象。
- background-image只是作为背景图片，起到装饰性效果，有位置（background-position）、大小（background-size）、重复（background-repeat）等调整。
title 和 alt属性分别有什么作用
- alt用在img标签中，规定在图像无法显示时的替代文本，而title是当鼠标滑过元素时显示的文字提示。
background: url(abc.png) 0 0 no-repeat;这句话是什么意思
- 表示加载当前目录下的abc.png文件作为背景图片，位置设置在元素内的起始位置（0，0），在任何方向都不重复（铺展）。
background-size有什么作用? 兼容性如何? 常用的值是?
- background-size用来规定背景图像在元素内的显示大小。
- 兼容性：IE8及以下不支持，opera mini和安卓4.3部分支持。
- 其常用值包括：
1、auto，默认值，保持背景图片的原始高度和宽度；
2、length/percentage，设置背景图像的高度和宽度(像素或以父元素的百分比表示)。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 “auto”；
3、cover，保持图片的原始比例扩展至足够大，以完全覆盖背景区域。背景图像的多余部分可能会超出显示区域；
5、contain,保持图片的原始比例，元素容器包含进所有的图片内容。
如何让一个div水平居中？如何让图片水平居中
- div是块级元素，会单独占一行，设置margin-left=margin-right，即margin: 0 auto；图片是行内元素，对于行内元素，设置text-align:center;即可。
如何设置元素透明? 兼容性？
- 设置元素样式opacity：0~1，改变元素透明度，0表示完全透明，1不透明。
- 兼容性caniuse
opacity 和 rgba都能设置透明，有什么区别？
- opacity作用于元素，设置全局透明度，对元素内所有内容的进行透明度设置，会继承父元素的 opacity 属性；
rgba()作用于元素的颜色及背景色透明度设置。
两种都不被IE支持(IE9开始支持)
代码
1、使用雪碧图实现，github链接,效果：
2、使用字体图标(如 fortawesome 或者fontello)实现。
github链接,效果：
