<h4>1.CSS Sprite(雪碧图|精灵图)指什么? 有什么作用？</h4>
答：CSS Sprite它是一种图片整合技术，该方法是通过将多张图片整合到一张图片上，然后通过background-position来定位要显示的部分。
作用：
<li>由于将各个小图片整合在一起，因此在加载页面时，可以减少去服务器请求的次数，加快页面加载速度。
<li>减少图片文件的大小，最终达到网站性能优化的目的。
以下是dome：
尝试用Css Sprite将多张图片整合在一起：
上图分别是3张图片，如果使用如下代码设置导航左侧的icon会产生4张图片，在访问页面时会产生3次request，不利于页面性能优化，浪费带宽和内存。
整合结果：
若使用Css Sprite技术可以使得3张图片整合为1张图，在利用background-position属性实现一张图在同一区域的重复使用。
上图所示，四张图片通过CSS Sprite技术整合成一张图片，既减小的图片的大小和命名多张图片的麻烦，也减少访问服务器的次数。
<a href="http://js.jirengu.com/zufisalino/1/edit?html,css,output">代码结果</a>
</br>
<h4>2.img标签和CSS背景使用图片在使用场景上有何区别</h4>
答：如果一张图片是网页内容的一部分，就该用img,否则建议用CSS背景图。要注意logo是否属于网页内容的一部分。
<li>img标签属于html的范畴，本质是语义化的显示图像的标签
<img src="xxx.png" alt="替代文本">
<li>background-image属性是css范畴的内容，本质是为元素设置背景图的属性
选择器{background:url(#);}
<li>在页面加载方式上，img标签作为文档内容的一部分，会随页面加载时同时加载进来；
background-image作为样式，要等页面加载完后背景才开始加载
综合来说，
img是一个语义化标签，图像应该是页面内的内容，有实际的意义，而background:url(#)是css的一个属性，图像只是起到背景装饰布局作用，不具备实际语义。
</br>
<h4>3.title 和 alt属性分别有什么作用?</h4>
<li>title属性可以作用于所有元素中，常用于显示元素的提示性信息。当鼠标移至元素时，会显示一段事先设定好的提示文本。
<li>alt属性作为一种局部变量，作用于input（对于图像按钮）和img元素，当图片无法显示或者禁止显示图片时，作为图片的替代文本，对图片进行说明。
</br>
<h4>4.background: url(abc.png) 0 0 no-repeat;这句话是什么意思?</h4>
1.background: url(abc.png) 0 0 no-repeat;设置背景的属性；
2.url(abc.png):背景图片的位置；
3.0 0 no-repeat:（0 0）设置该图片的位置（左上角），（no-repeat）设置图片只显示一次。
例如：
<h4>5.background-size有什么作用? 兼容性如何? 常用的值是?</h4>
答：background-size:用于控制背景图片的大小。
兼容性：
常用的值是：
| 值 | 描述 |
|---|---|
| length | 设置背景的宽高，第一个值为宽度，第二个为高度，若只设置一个值，第二值默认为auto |
| percentage | 以父元素的百分比设置背景的宽高 |
| cover | 将图像扩展至完全覆盖背景区域（图像尺寸等比例扩展） |
| contain | 将图像扩展至宽高完全适应背景区域 |
<a href="http://www.webhek.com/background-size/">这篇文章深入理解cover和contain的区别！！！</a>
</br>
6.如何让一个div水平居中？如何让图片水平居中
<li>div水平居中可以使用margin:0 auto;示例：
<li>图片通过img标签嵌套入div，再使用text-align：center
属性来设置
<h4>7.如何设置元素透明? 兼容性？</h4>
可以使用如下方法：
1.可以使用opacity:x的取值从0-1。
<li>opacity: 0.5; 这是最重要的，因为它是CSS标准.该属性支持Firefox, Safari和 Opera.
<li>filter:alpha(opacity=50); 这个是为IE6设的，可取值在0-100，其它三个0到1.
<li>-moz-opacity:0.5; 这个是为了支持一些老版本的Mozilla浏览器。
<li>-khtml-opacity: 0.5; 这个为了支持一些老版本的Safari浏览器。
来源：<a href="https://paran.io/css-transparent-attribute/" target=-blank>CSS透明属性详解</a>
opacity兼容性：
2.rgba(red green blue alpha),alpha的取值从0-1
rgba兼容性：
<h4>8.opacity和 rgba都能设置透明，有什么区别？</h4>
<li>opacity是Css属性的范畴，作用于元素（包括这个元素和元素内部的元素）即是具有继承性；
<li>rgba则是属性的值的范畴，仅仅只是作用在当前元素，没有继承性。
For example：
opacity:
rgba:
参考：
<a href="http://www.cnblogs.com/babycool/archive/2012/04/15/2450187.html">Css sprite原理及其探索</a>
<a href="https://my.oschina.net/u/1162572/blog/137403">img和background-image的各种区别</a>
<a href="http://www.w3cplus.com/content/css3-rgba">CSS3的rgba</a>
<a href="http://www.zhangxinxu.com/wordpress/2011/05/%E7%BF%BB%E8%AF%91-css3-backgrounds%E7%9B%B8%E5%85%B3%E4%BB%8B%E7%BB%8D/">CSS3 Backgrounds相关介绍</a>
<a href="http://stackoverflow.com/questions/492809/when-to-use-img-vs-css-background-image">when you use img vs css background-img </a>
注：版权归饥人谷peter和饥人谷所有，若有转载请注明来源
感谢观众：
