1. CSS Sprite(雪碧图|精灵图)指什么? 有什么作用?
CSS Sprite是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。
作用：
a. 很好地减少网页的http请求，从而大大的提高页面的性能。
b. 减少图片的字节。
c. 解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。
d. 更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便。
2. img标签和CSS背景使用图片在使用场景上有何区别?
- 如果一张图片是网页内容的一部分，就该用
<img>，否则建议用CSS背景图。 - 页面上固定不变或者不可点的，用背景图。对于可变的或者可点击的就用img图片。
3. title 和 alt属性分别有什么作用？
- title属性：title是为该属性的元素提供建议性的信息，它可以用在除了base，basefont，head，html，meta，param，script和title之外的所有标签。
当鼠标放置在选定元素时，大部分可视化浏览器会显示title的提示信息。
title属性有一个很好的用途，即为链接添加描述性文字，特别是当连接本身并不是十分清楚的表达了链接的目的。这样就使得访问者知道那些链接将会带他们到什么地方，他们就不会加载一个可能完全不感兴趣的页面。另外一个潜在的应用就是为图像提供额外的说明信息，比如日期或者其他非本质的信息。 - alt属性：alt属性只能用在img、area和input元素中，指定了替代文本，用于在图像无法显示或者用户禁用图像显示时，代替图像显示在浏览器中的内容。
4. background: url(abc.png) 0 0 no-repeat;这句话是什么意思？
设置背景图片地址为abc.png，X轴方向偏移为0，Y轴方向上偏移为0，不重复。
5. background-size有什么作用? 兼容性如何? 常用的值是?
- background-size属性规定背景图像的尺寸。
- 在IE8以上的浏览器被兼容
- 值
length：设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。
percentage：以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。
cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
contain：把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
cover和contain既有相同点又有不同点。相同点：图片都是等比缩放。不同点：cover是铺满整个显示区域，不会留下空白，如果显示比例和显示区域的比例相差很大背景图像的某些部分不会显示；contain正好相反，它是按照某一边来覆盖的显示区域，有可能会留空白。
6.如何让一个div水平居中？如何让图片水平居中？
div水平居中：
当div固定宽度时，可直接设置margin:0 auto;。
当div不是固定宽度时，可以将div设置为display:inline-block;，然后对父元素设置text-align:center;；或者div设置display:table;，然后设置：margin:0 auto;。
图片水平居中：图片是行内元素，直接在父元素中设置text-align:center;就可以完成居中。
7. 如何设置元素透明? 兼容性？
通过opacity: 0;不透明度这个属性来设置，它的属性值1表示完全不透明明，0表示完全透明。
可以使用opacity和设置alpha来设置一个元素的透明度，若其中文字需要透明，则使用opacity，对于不支持该属性的浏览器，使用fliter:opacity({0~100})来设置，对于不设置文字透明的，则使用rgba的方式来设置。
8. opacity 和 rgba都能设置透明，有什么区别？
- opacity作用于元素以及元素内的所有内容的透明度，而rgba()只作用于元素的颜色或其背景色。
- opacity会继承父元素的 opacity 属性，而rgba()设置的元素的后代元素不会继承透明性,只是针对自己本身有效，无法使内部的所有元素透明。
版权归本人及饥人谷所有，转载请注明出处。
