问答
1. CSS Sprite(雪碧图|精灵图)指什么? 有什么作用
答：
- 主要是把并不需要经常修改的图案（图标，logo等）合并于一张图片中，然后使用
background-position这个属性来改变背景图案的位置，达到减少页面请求的需要。
2. img标签和CSS背景使用图片在使用场景上有何区别
答：
-
img标签的src属性主要适用于需要经常修改的图片内容 -
css背景属性主要适用于不经常修改的图片内容
3. title 和 alt 属性分别有什么作用
答：
-
title用于鼠标悬停的信息提示 -
alt用于图片加载失败后的内容提示
demo
4. background: url(abc.png) 0 0 no-repeat;这句话是什么意思
答：
-
background-image=url(abc.png)背景图片引用地址 -
background-position=0 0背景图片相对于容器的原始位置（0,0）的偏移，现在的背景位置是0,0 -
background-repeat = no-repeat表示背景图片不平铺
5. background-size有什么作用? 兼容性如何? 常用的值是?
答：
-
background-size设置背景图片大小 - 兼容性：支持IE 8 以上的大部分浏览器（不包含IE 8），background-size兼容性
- 常用的值有：
- cover: 依据图片的原始比例撑满整个容器
- contain: 依据图片的原始比例使图片适应容器的宽高比显示
- 数值或者百分比或者auto: 按照设置显示背景图片的大小
demo
6. 如何让一个div水平居中？如何让图片水平居中？
答：
- div居中：设置宽度的情况下，
margin:0 auto - 图片居中：父元素设置
text-align:center
demo
7. 如何设置元素透明? 兼容性？
答：
-
opacity:0，兼容性 ，IE8以下可以设置为filter:alpha(opacity=0) -
background:rgba(255,255,255,0)设置rgba的第四个alpha值来控制元素的透明度，兼容性
8. opacity 和 rgba 都能设置透明，有什么区别？
答：
- 子元素会继承父元素的opacity属性
- rgba的后代元素不会继承rgba属性
demo
