CSS Sprite(雪碧图|精灵图)指什么? 有什么作用
- 雪碧图是运用在需要很多小图标小图片的场合，将很多小尺寸的图片集合在一张大图上，使用时通过background属性选择所需图片的位置、大小。
- 使用雪碧图将原本需要多次进行数据请求的操作，变为一次请求所有需要的数据，减少请求次数就减少的页面加载的时间。
- 雪碧图可以使用 http://csssprites.com/ 进行合成，选择所有需要的图片之后点击GENERATE即可生成，注意不要上传较大的图片，而且这也不符合雪碧图的用处。
csssprites.com
img标签和CSS背景使用图片在使用场景上有何区别
- 在图片是需要被展示的内容的一部分的时候使用img标签，alt属性可以在图片未能展现出来的时候对内容进行提示，并且对SEO友好
- img标签的图片用户可以方便的保存Logo或者复制Logo图片的链接
- 当图像不是内容的时候使用background-image，当小图标使用雪碧图的时候使用background-image
title 和 alt属性分别有什么作用
- title属性是鼠标移动到元素上显示的提示标签，是对元素的补充解释和说明
- alt属性是在元素加载不出来的时候，显示在页面上的文字，用来解释说明这个没有被显示出的元素。
background: url(abc.png) 0 0 no-repeat;这句话是什么意思
-
等效于
background-image: url(abc.png );//设定图片地址 background-position: 0 0;//设定背景图片的位置 background-repeat: no-repeat;//设定不重复 此外background还有其他可能的属性：
| 属性 | 作用 |
|---|---|
| background-color | 设定背景颜色 |
| background-size | 设定背景图片尺寸 |
| background-origin | 设定定位区域 |
| background-clip | 设定绘制区域 |
| background-attachment | 设定背景图像是否固定 |
background-size有什么作用? 兼容性如何? 常用的值是?
- 用以设定背景图片的尺寸，可能的值有
- cover 把背景图像扩展为足够大，使背景图像完全覆盖区域，背景图像的某些区域可能超过显示范围。
- contain 使图像在内容区域尽量大的完整显示，并长宽比不变。
- 也可以直接设定宽度和高度，例如 80px 90px ，第一个值设定宽度，另一个设定高度，如果只设定一个值，第二个值为auto。
- 还可以相对父元素的百分比来设定宽高，例如 15% 100%，第一个值设定宽度，另一个设定高度，如果只设定一个值，第二个值为auto。
-
兼容性上，支持IE9以上的浏览器，不支持IE8
background-size兼容性
如何让一个div水平居中？如何让图片水平居中
-
可以设置
margin: 0 auto;使块级元素居中。注意块级元素本身是充满一整行的，所以前提是给这个块级元素设定一个宽度。
div居中 给图片的父元素上添加
text-align: center;属性即可，这个属性作用在块级元素，使其内部的行内元素水平居中。
示例
如何设置元素透明? 兼容性？
-
opacity: 0~1;使元素及子元素透明
opacity兼容性
opacity 和 rgba都能设置透明，有什么区别
- opacity使元素整体透明，是元素的属性；rgba将颜色设置为透明，是颜色的属性，不涉及子元素。
- 示例：http://js.jirengu.com/zexohajuda/1/edit
示例
本教程版权归 张宇 和 饥人谷 所有，转载需要说明来源
