1. CSS Sprite(雪碧图|精灵图)指什么? 有什么作用？
- CSS Sprite能够把一些小的背景图片整合到一张图片文件中，具体的应用哪张图片需要再结合
background-image，background-repeat，background-position属性定位； - 目的：相对于使用零散的小图标，这样做能够使文件变小，并且减少了对服务器的请求次数，提高了网页加载速度；
- 难点：
- 需确定每个小图标在网页上的大小，提前设定；
- 注意各个图标之间的距离（在浏览器上调试好）
2 . background: url(abc.png) 0 0 no-repeat;这句话是什么意思？
以abc.png图片上0px 0px这个位置的图像作为元素的背景图像，不重复。
3 . img标签和CSS背景使用图片在使用场景上有何区别？
- 两者的区别：
- 写在CSS里面的图片是以背景图形式存在的，而写在html里的img是以标签形式存在的。在网页加载的过程中，以CSS背景图存在的图片会等到结构加载完成才开始加载，而html里的img标签是网页结构（内容）的一部分。
- CSS是用来修饰页面的，所以非内容的图片就写在CSS里面，如果是内容性的图片就写在html里。
- CSS背景图是作为背景，在图片没加载或加载失败时，不会有个图片的占位标记，不会出现红叉。例如：
.center{
width: 500px;
border: 1px solid;
margin: 50px auto;
text-align: center;
height: 200px;
}
.bgimage{
background: url(http://www.w3school.com.cn/i/eg_cute.gif) center top no-repeat;
border: 1px solid green;
height: 100px;
}
</style>
</head>
<body>
<div class="center">
<div class="bgimage"></div>
</div>
</body>```
正常显示：
图片不能显示时：
* img标签使用场景：
- 图像是内容的一部分，需加上alt属性；
- 依赖浏览器缩放图像比例并且可以呈现不错的效果；
- 图像有一个重要语义时，比如警告图标，
* 以下场景使用`background-image`：
- 图像不是内容的一部分，可有可无时；
- 图像代替文本使用时；
- 只需要展示图像的一部分时；
- 需要为不同的屏幕分辨率展示不同的图像使用 media查询时使用backgrond-image。
###4 . `title`和 `alt`属性分别有什么作用?
* `alt`：是html的属性，它有两个作用。第一，当图片无法正常显示时用来指定替换文字给用户提供文字说明使其了解图像信息，常用于img、area、input元素中；第二，alt还具有搜索引擎优化效果。
* `title`：既是标签，又是属性，一定程度上提升了用户体验。
- `<title>`标签可定义文档的标题：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我是标题</title>
</head>
<body>
<p>body 元素的内容会显示在浏览器中。</p>
<p>title 元素的内容会显示在浏览器的标题栏中。</p>
</body>
</html>
显示结果
- title属性规定元素的额外信息，鼠标移动到元素上时显示一段工具提示文本。title属性常与form以及a元素一同使用，以提供关于输入格式和链接目标的信息，也是abbr（标记一个缩写）的必须属性。`<abbr title="World Wide Web">WWW</abbr>`
[w3school](http://www.w3school.com.cn/tags/att_standard_title.asp)
###5 . `background-size`有什么作用? 兼容性如何? 常用的值是?
* `background-size`是CSS3的一个属性，用来规定背景图像的尺寸。
* 常见的值：
- 例如：`background-size: 50px 80px;`规定图像背景宽50px，高80px。
- `background-size: 50% 100%;`规定背景图像的宽是父元素的50%，高是父元素的100%。
- cover和contain**相同点：图片都是等比例缩放；不同点：cover是铺满整个显示区域，如果显示比例和显示区域的比例相差很大某些部分会不显示**；**contain正好相反，他是按照某一边来覆盖显示区域的，会有白边。**
值为contain时（宽度满了，高没有，下半部分有空白）
值为cover时（铺满了全屏）
###6 . 如何让一个div水平居中？如何让图片水平居中？
<style>
.center{
width: 500px;
line-height: 200px;
border: 1px solid;
margin: 50px auto;
text-align: center;}
</style>
</head>
<body>
<div class="center">
气泡
</div>
</div>
</body>```
显示结果：
task9-4.PNG
7 . 如何设置元素透明? 兼容性？有什么区别？
可以使用opacity（CSS3的一个属性）和rgba（color的一个值），
- 兼容性
- `opacity`不支持IE8以下版本，IE8部分支持
task9-12.PNG
-
rgba不支持包括IE8在内的以下版本，
task9-13.PNG
- 区别：
-
opacity除了对背景生效之外，应用它的元素的内容也会继承它，这样就会导致内容难以辨认。
应用opacity: 0.3 -
rgba是一种同时设置颜色和不透明度的机制，可以避免上述问题。
rgba(255,0,0,0.3)
-
代码
代码：三角 字体图标 CSS sprite
效果：三角 字体图标 CSS Sprite
