雪碧图/css

opacity:0.5;
filter:alpha(opacity=100); /* For IE8 and earlier */

1. CSS Sprite(雪碧图|精灵图)指什么? 有什么作用?

雪碧图就是指网站上一些小的图标、logo合并到一张图片上，通过 background-position属性来控制。
可以减少网络请求，节约资源。

2.img标签和CSS背景使用图片在使用场景上有何区别?

对于固定不变的内容，如图标等用css背景；对于可变的内容，图片和内容相关，用img标签；

3.title 和 alt属性分别有什么作用?

• title:设置鼠标悬停在元素上时显示的文字；
• alt:设置图片不能显示时，代替显示的文字。

4.background: url(abc.png) 0 0 no-repeat;这句话是什么意思?

给元素设置一张url为abc.png的背景图片，在元素的左上角显示，不平铺。

5.background-size有什么作用? 兼容性如何? 常用的值是?

background-size用来设置背景图片的大小，常用的值有：

• auto:默认值，不改变图片的原始高度和宽度
• <长度值>：成对出现，如，background-size:200px 50px,分别是宽高。如果只设置了一个值，则将其作为图片宽度值来等比缩放；
• <百分比>：背景图片的宽高依次设为所在容器的宽高乘以这百分比；
• cover：等比缩放直至填充满整个容器；
• contain：等比缩放直至某一边贴紧容器边缘为止。

6.如何让一个div水平居中？如何让图片水平居中?

1.div设置居中的方法：

• 给定一个宽度，然后设置margin: 0 auto;;
• 把它放在table标签内（利用table标签的长度自适应性），然后设置margin: 0 auto;

2.图片居中的方法：对图片的父容器设置 text-align: center;

7.如何设置元素透明? 兼容性？

• opacity:0.2;，IE8部分支持, 其他浏览器均支持；
• filter:alpha(20);，IE8及以下，其它主流浏览器都支持；

8.opacity和 rgba都能设置透明，有什么区别?

opacity会影响所有后代元素，rgba不会影响后代元素。