1.CSS Sprite(雪碧图|精灵图)指什么? 有什么作用
CSS Sprite图是把多个icon图标图片或页面会重复用到的小图片合并放在一张图里面，通过background-position这个属性调整背景图片的位置来显示合并大图中的某个局部图像区域。
作用是减少网络请求，让页面加载更快，图片只需请求一次，以后使用都调用缓存内的图片。与此类似减少请求另一种方法是把图片（只适用于很小的图标例如icon）转换成base64的编码，url直接引用这个编码就能看见图片。base64适用在图标加载响应要求较高的场景下使用。
雪碧图的使用：背景图与元素的原点重合。好比把床单的左上角与桌子的左上角对齐，多余的部分不要。（0，0）坐标原点位置，即外层块元素的左上角，background-position位置设定是指图片与坐标原点的偏移量。白色框是元素，绿色框是背景图片。X坐标值为正则图片左上角向右平移，为负则图片左上角向左平移，Y坐标值为正则图片左上角向下平移，为负则图片左上角向上平移。
背景小技巧：在开发过程中用图片做背景的同时，往往还要用图片的主色调来作用元素的背景色，目的是背景图片丢失的时候防止视觉效果变化太大。
2.img标签和CSS背景使用图片在使用场景上有何区别
页面上固定不变的东西如图标icon、logo等用背景图片
对于经常会改变的内容（图片是和内容相关的），用户图片，比如VIP会员头像等。
图片转载自饥人谷学员
3.title和 alt属性分别有什么作用
title是补充的额外信息即鼠标悬停标签上的额外说明信息。alt则是替代信息而不是提供额外说明，alt可以用来替换说明加载失败时的img或a链接。
4.background: url(abc.png) 0 0 no-repeat;这句话是什么意思
background-image:url(http://xxx.jpg) 这里是url引用，而不是src引入要引号
background-position:0px 0px; 图片偏移位置水平垂直均为0
background-repeat:repeat-x/repeat-y/no-repeat(水平重复/垂直重复/不重复)
5.background-size有什么作用? 兼容性如何? 常用的值是?
background-size指定背景图片实际显示区域大小。
属性值：像素值/百分比/cover/contain
cover图片会覆盖整个背景区域,不会留下边白,即小于背景区域的图片会放大充满整个背景区域。contain图片自适应最好的显示效果并被包裹在背景区域里，有可能会留下空白。
6.如何让一个div水平居中？如何让图片水平居中
块级元素水平居中：margin：0 auto; 不考虑上下margin值时而直接使用:
margin-left:auto;
margin-right:auto;
图片水平居中：对img标签先包裹一个块级父容器，再对块级父容器使用text-align:center实现居中。text-align:center;设置元素内的文本水平居中对齐。只对块级元素里面的行内元素生效（a,img,input,span）,注意这里居中是参照该行内元素的父容器元素生效。text-align有5个值：left/right/center/justify/inherit，左对齐/右对齐/居中对齐/两端对齐/继承父元素align值。justify两端对齐的时候，每行中的字间距可能不一致。
7.如何设置元素透明? 兼容性？
使用opacity属性来设置元素的透明度，值从 0.0 （完全透明）到 1.0（完全不透明）。兼容性
8.opacity和 rgba都能设置透明，有什么区别?
opacity:0.5;（0～1）使元素内所有内容透明度为0就像消失，但是所占据的空间还在，不会改变页面布局,opacity属性可继承。
background-color: rgba(0,0,0,0.5); 这种加alpha通道值设透明度只能对元素的颜色或者背景色设置透明度，rgba设置的透明属性无法继承。
