css常见技巧-雪碧图、背景、居中、透明度

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

CSS sprites是指把网页中很多小图片（很多图标文件）做成按规律排列的一张大图上，在显示的时候通过background-image、background-position显示图片特定部分达到和分散的一张张小图片一样的效果。
作用：

• 减少对服务器的请求次数:可以合并多数背景图片和小图标，方便在任何位置使用，这样不同位置的请求只需要调用一个图片，从而减少对服务器的请求次数，降低服务器压力，同时提高了页面的加载速度，节约服务器的流量。

• 提高页面的加载速度:sprite 技术的其中一个好处是图片的加载时间(在有许多 sprite 时，单张图片的加载时间)。由所需图片拼成的一张 GIF 图片的尺寸会明显小于所有图片拼合前的大小。单张的 GIF 只有相关的一个色表，而单独分割的每一张 GIF 都有自己的一个色表，这就增加了总体的大小。因此，单独的一张 JPEG 或者 PNG sprite 在大小上非常可能比把一张图分成多张得来的图片总尺寸小。
• 减少鼠标滑过的一些bug:IE6不会主动预加载鼠标滑过即a:hover中的背景图片，所以，如果使用多张图片，鼠标滑过会出现闪白的现象。使用CSS雪碧，由于一张图片即可，所以不会出现这种现象。
  <p>

参考：css sprite ( background-position用法 )

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

• 可变的东西：Img标签更多的定义是“活”的东西，可变的。
  比如在网站中banner广告肯定是运用了img标签来添加图片，Img会包裹在a链接里面方便用户点开。
• 固定不变的：而CSS中的背景图片就是一些比较固定的图片，在网站中存在而不会变化也不能被点开。

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

• title属性更多是提供一个额外信息的意思，当鼠标放在连接上的同时会出现提示或者补充信息。
  可以用在除了base，basefont，head，html，meta，param，script和title之外的所有标签，但是并不是必须的。
• alt更多体现一个代替的作用，当原本应该出现的图片没有正常显示，alt的值在图片的位置显示内容，以便用户解读。

alt效果

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

• “url()”**是背景图片的url地址，可以是绝对url，也可是相对url。
• “0 0”**是背景图片相对位置，相对于元素的左上角向x轴和y轴的偏移量，第一个是x坐标，第二个是y坐标，“0 0”代表最左上角。
• “no-repeat”**是设置背景图片不重复。

background-position：
①设置两个值，前面的是相对x轴方向定位(水平)，后面的相对于y轴方向定位(垂直)。如果只设置一个值，这个值是默认是在x轴方向的定位，y轴方向默认的是居中对齐
②原点是不会动的，移动的是图片 X坐标为正则图片左上角向右平移，为负则图片左上角向左平移；Y坐标为正则图片左上角向下平移，为负则左上角向上平移
③x y也可以用“top、bottom、left、right、center”这五个对齐方式来表示。x y等于center的时候表示居中对齐，其他的表示背景图片相对于在容器上下左右对齐。
④X Y坐标除了可以用数字表示，还可以用百分比表示。用百分比的算法是：
X：（容器的宽度-图片的宽度）乘以（X方向的百分数）
Y：（容器的高度-图片的高度）乘以（Y方向的百分数）

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

作用：background-size设置背景图像的大小尺寸。

①length
设置背景图像的高度和宽度。
第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为** "auto"。
②percentage
以父元素的百分比来设置背景图像的宽度和高度。
第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为** "auto"。
** 牢记：background-size:100%不等于background-size:100% 100%。
③cover把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
④contain把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域,图片会失真,慎用！

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

一、margin和width实现水平居中
优点：实现方法简单易懂，浏览器兼容性强；
缺点：扩展性差，只能针对已知宽度的div，无法自适应未知项情况。

margin和width实现水平居中

)

二、inline-block实现水平居中方法

• 原理：父元素设置text-align:center;font-size:0;子元素设置display:inline-block;*

做点：简单易懂，扩展性强；
缺点：需要额外处理inline-block的浏览器兼容性。

inline-block实现水平居中方法

六种方法使div水平居中

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

• rgba(0,0,0,0.5),a表示透明度，0=透明，1=不透明；

rgba()兼容性

• opactiy:0.5;filter:Alpha(opacity=50); /* IE8 以及更早的浏览器 */;

opacity兼容性

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

1）、opacity作用于元素以及元素内的所有内容的透明度，子元素会继承父元素的 opacity 属性。
2）、rgba()只作用于元素的颜色或其背景色，后代元素不会继承透明性,只是针对自己本身有效，无法使内部的所有元素透明。