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

雪碧图：将多个小的icon合成一个大图，通过css设定不同的定位与偏移显示大图不同的区域；
作用：减少网络请求，也就减少了网络资源的消耗，也就减少了网页响应时间；

二、img标签和CSS背景使用图片在使用场景上有何区别

img标签：常用于图片不固定，随时可能出现更新，如qq头像、动态日历、首页产品展示图等等；
CSS背景图片：常用于固定的图片或背景的，一般不会改变，如功能图标、指示箭头等等；

三、title 和 alt属性分别有什么作用

alt属性：链接的图片因为某种原因不能加载时在页面显示的提示信息，提示信息显示在原本加载图片的地方；
title属性：鼠标悬停在该图片上时显示一个小提示，鼠标离开就消失；

四、background: url(abc.png) 0 0 no-repeat;这句话是什么意思

background：url(abc.png) 0 0 no-repeat;：用于申明背景图片属性
url(abc.png)：用于声明使用abc.png作为背景图片；
0 0：用于声明图片水片和垂直偏移都为0px；
no-repeat：声明图片不进行重复填充；

下图为实例：

background属性

五、background-size有什么作用? 兼容性如何? 常用的值是?

作用：设置背景图像的尺寸；
兼容性：

background-size兼容性

background-size值实例

六、如何让一个div水平居中？如何让图片水平居中

div水平居中:为div添加margin: 0 auto声明；
图片水平居中:为该图片的父容器添加text-align:center声明；
实例如下图：

div和img图片居中

七、如何设置元素透明? 兼容性？

元素透明：为元素添加opacity：0~1(0为完全透明,1为不透明)声明
兼容性如下图：

opacity兼容性

八、opacity 和 rgba都能设置透明，有什么区别

1. 语法区别：
opacity使用语法：opacity: value|inherit;/*value:0~1，0为完全透明，1为完全不透明*/
rgba使用语法：rgba(r,g,b,a)/*a:0~1，0为完全透明，1为完全不透明*/
2. 属性区别：
使用opacity属性时后代元素会继承父元素的 opacity 属性，使用rgba属性值时后代元素不会继承不透明属性，实例如下图：

opacity和rgba属性区别

九、代码题

1. 使用CSS Sprite 把如下6张图标图片合并成一张图片，做出如下效果, 当 hover 时背景变色：
   
   
   答：代码9-2-1
2. 使用字体图标(如 iconfont, 查找->加入购物车->下载 demo 、 fortawesome 或者fontello)实现上例效果
   答：代码9-2-2

3.使用css border实现如下三角形