任务九（2）-CSS常见技巧

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

答：因为每一个url都会发送一次网络请求，然而icon本身就不大，所以要把页面中所有小的icon图标集合在同一张大图上，然后用position属性定位图片。作用是减少网络请求，每次加载的都是缓存。

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

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

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

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

天猫例子

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

答：title属性更多是提供一个额外信息的意思，当鼠标放在连接上的同时会出现提示或者补充信息。alt更多体现一个代替的作用，当原本应该出现的图片没有正常显示，Alt的值会被现实出来以便用户解读。

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

答：这句话代表在背景图片的设置，首先abc这张图来自与htm文档l同一个文件夹；0 0 代表 在页面中的水平与垂直位置则为左上角；no-repeat表示背景图片不会重复平铺。

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

答：background-size用来规定背景图片的尺寸。
常用的值有：length/percentage/cover/contain;

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

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

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

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

background-size的兼容性

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

答：让div水平居中可以写 margin :o auto语句。给div设置一个固定的宽度，左右margin相等（auto）。因为一个div是一个区块，区块中的内容可以直接对div设置text-align：center，也就是针对父级元素设置。

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

答：opacity属性可以设置透明度。0-1，0是完全透明，1是完全不透明。 如果让div透明的话 整个区块都是透明的；背景色透明只是针对背景颜色。

Opacity的兼容性

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

答：RGBA是在R（Red）G（Green）B（Blue）模式上增加了alpha通道，alpha通道是不透明度的意思。它与opacity的区别在于opacity会继承父元素的 opacity 属性，而RGBA设置的元素的后代元素不会继承不透明属性。

---

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