任务9-2 CSS常见技巧

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

CSS Sprite是一种网页图片的处理技术，利用background-position属性将多张图片整合到一张图片中，以减少访问图片的次数和图片文件的大小，最终达到网站性能优化的目的。

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

![](xxx.gif)

css选择器 {background-image：url();}

image作为语义化标签，图像是有实际的表示意义，常常用于形象化的声明语义；background-image作为Css属性之一，图像只是起到背景装饰作用，不具备实际语义。

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

title属性作为一种全局变量，可以作用于所有元素中，常用于显示元素的提示性信息。
alt属性作为一种局部变量，作用于input（对于图像按钮）和img元素，常用于显示图片无法显示或禁止显示时的替代文本。

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

设置一张图像地址位于abc.png
从左上角开始
且不产生平铺效果

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

background-size是css3的新背景属性，规定背景图片的尺寸
{background-size: 70px 100px;}设置背景的宽高，第一个值为宽度，第二个为高度，若只设置一个值，第二值默认为auto
{background-size: 70% 100%;}以父元素的百分比设置背景的宽高
cover ：覆盖，背景要覆盖元素的所有区域，不能有空白出现
contain ：包含，整个背景图都要被包含在元素内，没有超出的部分。

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

div的水平居中可以使用margin或是position属性来设置；
图片通过img标签嵌套入div，再使用text-align：center属性来设置

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

Paste_Image.png

1. opacity: 0.5; 这是最重要的，因为它是CSS标准
2. filter:calpha(opacity=50); 这个是为IE6设的，可取值在0-100，其它三个0到1;
3. -moz-opacity:0.5; 这个是为了支持一些老版本的Mozilla浏览器;
4. -khtml-opacity: 0.5; 这个为了支持一些老版本的Safari浏览器;

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

opacity是Css属性的范畴，作用于元素（包括这个元素和元素内部的元素）；
rgba是属性值的范畴，作用于当前元素（仅仅是当前元素，不影响元素的内部元素）

Paste_Image.png

opsvity-revise：
那么如果使用opacity同样实现rgba的效果，该怎么办呢？一个常用的方法是将banner和span分离成 兄弟元素 ，banner使用z-index置于span下面
就是说span的z-index值大于banner的z-index值；