任务9-2

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

CSS雪碧 即CSS Sprite，也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。

优点:

减少加载网页图片时对服务器的请求次数
可以合并多数背景图片和小图标，方便在任何位置使用，这样不同位置的请求只需要调用一个图片，从而减少对服务器的请求次数，降低服务器压力，同时提高了页面的加载速度，节约服务器的流量。
提高页面的加载速度
sprite 技术的其中一个好处是图片的加载时间(在有许多 sprite 时，单张图片的加载时间)。由所需图片拼成的一张 GIF 图片的尺寸会明显小于所有图片拼合前的大小。单张的 GIF 只有相关的一个色表，而单独分割的每一张 GIF 都有自己的一个色表，这就增加了总体的大小。因此，单独的一张 JPEG 或者 PNG sprite 在大小上非常可能比把一张图分成多张得来的图片总尺寸小。
减少鼠标滑过的一些bug
IE6不会主动预加载鼠标滑过即a:hover中的背景图片，所以，如果使用多张图片，鼠标滑过会出现闪白的现象。使用CSS雪碧，由于一张图片即可，所以不会出现这种现象。

缺点:

内存使用
影响浏览器的缩放功能
拼图维护比较麻烦
使CSS的编写变得困难
CSS 雪碧调用的图片不能被打印
错误得使用 Sprites 影响可访问性

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

img标签的图片一般是可变的，例如网站上的广告，用户头像，产品介绍、网页介绍，这些能传达更多内容的东西。

QQ截图.jpg

css背景图片一般比较少变化，除非网页改版或者一些样式需要改版才会改变。

QQ截图20160809214924.jpg

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

title 属性是在你鼠标悬停在该图片上时显示一个小提示，像是标签批注一类的作用。title属性可以用在除了 base，basefont，head，html，meta，param，script 和 title 之外的所有标签。

QQ截图20160809221646.jpg

alt 属性是在你的图片因为某种原因不能加载时在页面显示的提示信息，它会直接输出在原本加载图片的地方。alt属性只能用在img、area和input元素中。

QQ截图20160809221222.jpg

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

背景图引用相对目录路径为abc.png的图片。
backgroun-position：0 0为左上角（背景图片放置容器位置）。
x% y% ( 第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您仅规定了一个值，另一个值将是 50%。)
mpx npx (第一个值是水平位置，第二个值是垂直位置。左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。如果您仅规定了一个值，另一个值将是50%。)
no-repeat:不重复。
repeat:重复
no-repeat:不重复
repeat-x:仅水平重复
repeat-y:仅垂直重复
inherit:继承自父辈元素。

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

background-size 属性规定背景图像的尺寸

QQ截图20160809223638.jpg

常用值:
length设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

QQ截图20160809225546.jpg

percentage以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

QQ截图20160809225708.jpg

cover把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。

QQ截图20160809225832.jpg

contain把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

QQ截图20160809225932.jpg

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

div水平居中:margin:0 auto；
图片水平居中:1、//ie8及以上
display:table-cell;
vertical-align:middle;
2、在内层容器内加一个空元素
.item:before{
display:inline-block;
height:100%;
vertical-align:middle;
}
.item2 img{
vertical-align:middle;
}
3、js处理，设置上下外边距等高

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

opacity:从 0.0 （完全透明）到 1.0（完全不透明）

QQ截图20160809230850.jpg

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

opacity：一般用于调整图片或者模块的整体不透明度，设置opacity元素的所有后代元素会随着一起具有透明性。opacity取值0~1之间。
rgba：设置颜色的不透明度，一般用于调整background-color、color、box-shadow等的不透明度。Alpha透明度。取值0~1之间。