2016/05/18
@hunger 说：
-
CSS Sprite(雪碧图|精灵图)指什么? 有什么作用
主要是指将多个小图标合成为一张大图，通过对background-position的设置显示不同的图标，从而减少网络请求，只用加载一张图片，再用到的时候是用缓存的方式
-
img标签和CSS背景使用图片在使用场景上有何区别
img一般用在内容可变的，经常更换的地方，比如轮播图，css背景图一般用在内容固定的地方，比如一个网站的logo图
0_1463325996297_upload-6a8412cf-0c7f-474f-ae18-2fe2da794600
-
title 和 alt属性分别有什么作用
title属性是给链接文字提示和当鼠标悬停在图片上出现的文字提示，alt属性是当图片加载失败时，出现的提示
0_1463326560300_upload-1ff030b9-e948-4ae9-acf8-f05f6e9b78bf
0_1463326741774_upload-df22fbd5-6642-44a6-9670-d8a452850392
-
background: url(abc.png) 0 0 no-repeat;这句话是什么意思
意思是背景图是为abc.png的图片，在水平方向和垂直方向上偏移量为0，图片不重复
-
background-size有什么作用? 兼容性如何? 常用的值是?
- background-size用于设置背景图片的尺寸。
-
兼容性：
0_1463360530778_upload-95d52c08-9109-4288-96c3-690bc33f4c41
常用的值有background-size: length|percentage|cover|contain;
-
length:设置背景图像的宽度和高度，第一个值设置宽度，第二个值设置高度，如果只设置一个值，第二个值会被设置为auto。
0_1463409750211_upload-deba3a66-0203-4d47-ab6b-3048d591bada -
percentage:以父元素的百分比来设置背景的宽度和高度，第一个值设置宽度，第二个值设置高度，如果只设置一个值，第二个值会被设置为auto
0_1463409812406_upload-10df1258-e9b1-40a5-a562-c3948fd4bfeb -
cover:把背景图像扩展至足够大，使背景图完全覆盖背景区域。背景的某些部分也许无法在背景定位区域内。
0_1463409900017_upload-6aa8e3c6-68a1-46f0-8276-64b0c014dcd9 -
contain:把背景图像扩展至最大尺寸，是其宽度和高度完全适应内容区域。
0_1463410037639_upload-e7bb4bf6-35a6-4f45-8ae0-613d98e081e7 -
如何让一个div水平居中？如何让图片水平居中
让div水平居中，可以用margin:0 auto;
让图片水平居中，可以用text-align:center;
0_1463410534039_upload-bb77b0a8-f04a-41b0-be57-98149ffad5d7
0_1463410556617_upload-932a47aa-0142-4771-bb57-3fa55db404ba
-
如何设置元素透明? 兼容性？
兼容性：
0_1463413284843_upload-a8a9d544-3068-4229-bc1e-a7311a98ff6e
opacity:0~1;
filter:alpha(opacity=0~100);(对于IE8和更早的版本)
0_1463411373945_upload-17a41552-e3f1-4131-8850-fdc9f2280a52
0_1463411434039_upload-89046460-841b-423a-99a2-f9e39d5ce3d7
-
opacity 和 rgba都能设置透明，有什么区别
- opacity设置透明，整个容器都会变透明，包括其中的文字，图片都会透明
- rgba只是背景颜色透明，但是其中其他的元素还在正常显示的
0_1463413050012_upload-bb680e90-771d-4012-b5d9-2ed5fe63f118
代码链接
