1. CSS Sprite(雪碧图|精灵图)指什么? 有什么作用。
CSS雪碧 即CSS Sprite，也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。
作用：是减少加载网页图片时对服务器的请求次数
可以合并多数背景图片和小图标，方便在任何位置使用，这样不同位置的请求只需要调用一个图片，从而减少对服务器的请求次数，降低服务器压力，同时提高了页面的加载速度，节约服务器的流量。
提高页面的加载速度。
sprite 技术的其中一个好处是图片的加载时间(在有许多 sprite 时，单张图片的加载时间)。由所需图片拼成的一张 GIF 图片的尺寸会明显小于所有图片拼合前的大小。单张的 GIF 只有相关的一个色表，而单独分割的每一张 GIF 都有自己的一个色表，这就增加了总体的大小。因此，单独的一张 JPEG 或者 PNG sprite 在大小上非常可能比把一张图分成多张得来的图片总尺寸小。
减少鼠标滑过的一些bug。
IE6不会主动预加载鼠标滑过即a:hover中的背景图片，所以，如果使用多张图片，鼠标滑过会出现闪白的现象。使用CSS雪碧，由于一张图片即可，所以不会出现这种现象。
2. img标签和CSS背景使用图片在使用场景上有何区别。
background-image存在于大的background中，其属性设置多种多样，变换较为丰富
img 上能写字，能增加其余想增加的元素
一般来说，如果是装饰性的图片就使用background-img，如果和文体内容很相关就使用img
在网页加载的过程中，以css背景图存在的图片background-image会等到结构加载完成（网页的内容全部显示以后）才开始加载，而html中的标签img是网页结构（内容）的一部分会在加载结构的过程中加载，换句话讲，网页会先加载标签img的内容，再加载背景图片background-image，如果你用引入了一个很大的图片，那么在这个图片下载完成之前，img后的内容都不会显示。而如果用css来引入同样的图片，网页结构和内容加载完成之后，才开始加载背景图片，不会影响你浏览网页内容。
3. title和 alt属性分别有什么作用
title:给超链接标签a添加了title属性，把鼠标移动到该链接上面是，就会显示title的内容，以达到补充说明或者提示的效果。
alt:是用来指定替换文字，只能用在img、area和input元素中（包括applet元素），用于网页中图片无法正常显示时给用户提供文字说明使其了解图像信息。
4. background: url(abc.png) 0 0 no-repeat;这句话是什么意思。
abc.png.位置在0，0，不重复。
5. background-size有什么作用? 兼容性如何? 常用的值是?
作用：设置设置背景图片大小。
常用的值：
兼容性：
6. 如何让一个div水平居中？如何让图片水平居中。
div水平居中：margin：0 auto；
图片水平居中：text-align：center；
7.如何设置元素透明? 兼容性？
opacity：设置元素所有内容透明。
8. opacity和 rgba都能设置透明，有什么区别。
- rgba()表示 红 绿 蓝 alpha ,W3C指在原有的rgb颜色模型之后增加了 “alpha”参数，“可以让制定的颜色透明化”（rgb()上扩展的，其只可以设置颜色，而不能使设置的颜色透明化）
例子：rgba(55,146,179,.5) ; //rgb值为“55,146,179”，.5使设定的rgb值为50%透明,1为完全不透明，0为完全透明 - opacity属性是css3的属性，也可以实现透明效果
例子：opacity:.65; //1为完全不透明，0为完全透明
rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度，
而rgba()只作用于元素的颜色或其背景色 - 两种都不被IE支持(IE9开始支持)
若要为使浏览器兼顾怎么办，下面举例可以解决这个问题：
background:rgb(55,146,179); /for IE/
background:rgba(55,146,179,.25); /for browsers that support RGBA/
本教程版权归饥人谷_duoduo和饥人谷所有，转载须说明来源!
