任务9-2：CSS常见技巧

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

把背景图合并成一张大图，通过background-position定位图片，当打开页面时只需加载一次这张大图，从而减少网络请求。

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

img标签用于经常变动的图片，如头像。
css背景用于固定不变的图片，如图标。

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

title：
（1）可以放在<title></title>之间来显示网页的标题
（2）为链接添加描述性文字，就是当鼠标放到图片上时会显示title属性里面的内容，以达到补充说明或者提示的效果。而且对于seo没什么作用。

title的作用

alt：
（1）用来指定替换文字，对图片起到一个注释的作用，它只能用在img、area和input元素中（包括applet元素）。用于网页中图片无法正常显示时给用户提供文字说明使其了解图像信息。
（2）利于seo的作用

alt的作用

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

背景图片引入的地址为abc.png，在水平方向和垂直方向不偏移，而且背景图片不重复。

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

作用：设置背景图片的固定尺寸来展示
常用的值：length、percentage、cover、contain

兼容性

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

div水平居中：
设置margin: 0 auto;
图片水平居中：
（1）给图片添加一个父容器，在图片的父容器上设置text-align: center;
（2）设置display: block; margin: 0 auto;

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

opacity:0~1; filter:alpha(opacity=50)
background：rgba（255,0,0,0~1）

opacity兼容性 rgba的兼容性

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

opacity：作用于元素，以及元素内的所有内容的透明度
rgba：只作用于元素的颜色或其背景色