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。
3，title和 alt属性分别有什么作用?
- title属性是对链接进行补充解释的作用，通过鼠标悬停在连接处查看；
- alt属性是当链接加载出现问题才会显示的，对链接内容的解释补充作用。
4，background: url(abc.png) 0 0 no-repeat;这句话是什么意思?
- 这句话的意思是：设置背景图片（链接是abc.png）坐标为0px 0px(左上角)，采用不重复的方式展现。
5，background-size有什么作用? 兼容性如何? 常用的值是?
-作用：为背景图片设置尺寸。
- 兼容性：
- 常用的值：
- length：设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。
- percentage：以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。
- cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
- contain：把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
6，如何让一个div水平居中？如何让图片水平居中?
7，如何设置元素透明? 兼容性？
opacity：0~1
rgba:0,0,0,0-1
8，opacity和 rgba都能设置透明，有什么区别?
- opacity属性作用于该元素和该元素的子元素，子元素可以继承；
- rgba只作用于元素的颜色或元素的背景色，子元素不会继承.
