一、CSS Sprite(雪碧图|精灵图)指什么? 有什么作用
- css雪碧图又叫css精灵或css sprite，是一种背景图片的拼合技术。
- 用css雪碧图，能够减少页面的请求数、降低图片占用的字节，以此来达到提升页面访问速度的目的。
二、img标签和CSS背景使用图片在使用场景上有何区别
- 使用img的场景
- 如果你希望别人打印页面时候包含这张图片请使用 img 标签。
- 当这张图片有非常有意义的语义，比如警告图标，请使用img标签及它的alt属性。这样意味着你可以向所有的用户终端现实他的意义。
- 假如该图片是变化的不是固定的，图片跟内容是相关的则用img。
- 使用background-image的场景
- 如果图片不是内容的一部分使用 background-image
- 如果使用图片替换文字请使用 background-image
- 如果你不希望别人打印页面时候包含这张图片请使用 background-image
- 如果你想改善加载时间 使用 CSS sprites
- 如果你只想用一张图片的一部分 请使用 CSS sprites
- 用background-image 以及 background-size:cover 拉伸填充整个窗口
三、title 和 alt 属性分别有什么作用
- title 应用在img时，鼠标滑过时显示的文字提示，用户体验上很重要；
应用在a时，是网站标题； - alt 此属性的实质作用是图片在无法正确显示的时候起到文本替代的作用。
四、background: url(abc.png) 0 0 no-repeat;这句话是什么意思
- 在x:0 y:0 的位置插入不重复的背景图片abc.png
五、background-size有什么作用? 兼容性如何? 常用的值是?
- background-size用作规定背景图片的尺寸大小。
-
在IE8以及以前不兼容，其他大部分都可使用；
de1b97f6-fb37-4771-8883-34a1d41afe23.png - 常用的值：
contain: 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
cover: 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
六、如何让一个div水平居中？如何让图片水平居中
- 通过设置magin{0 auto}样式来让div水平居中
- 图片以及文本可以通过设置text-align：center样式来水平居中；
七、如何设置元素透明? 兼容性？
- 可使用 opacity：（0-1）来设定，其值越靠近0越透明。IE8以下的浏览器不兼容。可用以下方法补充：filter: alpha(opacity=0~100); background: rgba（255,0,0,0~1）来设定，其值越靠近0越透明;IE8 以下的浏览器不兼容；
八、opacity和 rgba都能设置透明，有什么区别
- opacity设置透明，子元素会继承，会使整体都透明
- rgba子元素则不会继承,一般用于设置背景的透明度
