html css雪碧图,css常见小技巧（雪碧图）

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

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

优点：

减少加载网页图片时对服务器的请求次数

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

提高页面的加载速度

sprite 技术的其中一个好处是图片的加载时间(在有许多 sprite 时，单张图片的加载时间)。由所需图片拼成的一张 GIF 图片的尺寸会明显小于所有图片拼合前的大小。单张的 GIF 只有相关的一个色表，而单独分割的每一张 GIF 都有自己的一个色表，这就增加了总体的大小。因此，单独的一张 JPEG 或者 PNG sprite 在大小上非常可能比把一张图分成多张得来的图片总尺寸小。

减少鼠标滑过的一些bug

IE6不会主动预加载鼠标滑过即a:hover中的背景图片，所以，如果使用多张图片，鼠标滑过会出现闪白的现象。使用CSS雪碧，由于一张图片即可，所以不会出现这种现象。

一个在线合成图片的网站CSSsprite

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

CSS背景图片用于页面背景图，适用于不需要点击，没有外链等过多操作的图片。在网页加载的过程中，以css背景图存在的图片会等到结构加载完成(网页的内容全部显示以后)才开始加载。img是html里的img标签，在网页结构(内容)的加载的过程同时就会被加载。

通常是非内容的图片就写在css里面(用来修饰页面的元素)，如果是内容性的图片就写在html里面，

例如做一个有漂亮边框的相册。那么修饰边框的图片就写在css里面，相框里面的内容照片就写在html里面。图片做为背景，在图片没加载的时候或者加载失败的时候，不会有个图片的占位标记，不会出现红叉。

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

alt属性是在图片因为某种原因不能加载时在页面显示的提示信息，它会直接输出在原本加载图片的地方，在SEO方面有很多的应用。而title属性是在鼠标悬停在该图片上时显示一个小提示，鼠标离开就会消失。

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

其作用是在页面中加一个背景图片，"0 0"代表background-position的值，表示背景图的定位，第一个“0”表示X轴位置为0，第二个“0”表示Y轴位置为0，即图片位置在左上角。单位是像素 (0px 0px) 或任何其他的 CSS 单位。

no-repeat表示此图片不平铺，也就是说在这个位置只出现一次，不会自动铺满，同时还有其他几个值L：repeat:平铺 repeat-x:横向平铺 repeat-y:纵向平铺。

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

background-size的作用是调整图片在页面上所占据的位置大小。

常用的值：

兼容性：

background-size: cover; 指将图片铺满background-size所规定的范围。background-size: contain; 指将整个图片包含在background-size所规定的范围内。

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

div是块元素，所以使用margin: 0 auto; 使其居中。img图片是行内元素，所以使用text-align:center;使其居中。

7.如何设置元素透明? 兼容性？opacity和 rgba都能设置透明，有什么区别

opacity属性能够设置元素的不透明度，取值为0~1，0完全透明，1完全不透明。若是设置在父级div中，则整个div的文字、图片都会显示所设定的透明度。我们可以利用伪类hover来使图片拥有选择即被透明覆盖的效果。

兼容性：

rgba是用来控制元素的颜色和背景颜色。对文字无效。

本文版权归作者和饥人谷所有，转载请注明来源