雪碧图

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

答：CSS Sprite，中文叫雪碧图，也有人喊CSS精灵，就是一种背景拼合的技术，然后通过background-position来显示雪碧图中需要显示的图像。雪碧图被运用在众多使用了很多小图标的网站上。
作用：
1.服务器上都每一个资源都需要加载，图片也是如此，如果有许多不同的icon，就需要有多次的请求，如果合成一张图片就可以减少请求的次数，从而提高加载速度；
2.可以降低图片占用字节
参考资料：CSS雪碧图

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

• 如下场景使用img标签比较合适：
  1、如果图像是内容的一部分，使用Img标签。
  2、使用img(alt文本)图像有一个重要的语义时,比如一个警告图标。这将确保图像的意义可以很好的和user-agents沟通,包括屏幕阅读器。
  3、如果你依赖于浏览器缩放图像比例并且可以呈现不错的效果时使用Img标签。
  4、如果配合 z - index 伸展背景图像来填补它的整个窗口时使用Img标签。
  5、使用img代替有背景图像可以显著提高性能的动画背景。
  6、IMG会首先加载因为src在html文件本身中而在有背景图像源是样式表中引入的图像，加载样式表加载后,延迟加载的网页。
• 如下场景使用CSS背景比较合适：
  1、如果图像不是内容的一部分时使用backgrond-image。
  2、如果你想打印页面并且你不想要的图像包括默认情况下使用backgrond-image。
  3.如果需要缩短下载时间通过CSS sprites 时使用backgrond-image
  4.如果你只需要展示图像的一部分通过CSS sprites，时使用backgrond-image
  5.如果你需要为不同的屏幕分辨率展示不同的图像使用 media查询时使用backgrond-image
  参考文档：如何使用img标签和CSS背景

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

• title是一个全局属性，主要是为元素增加一个小提示或者注释，当鼠标hover到这个有title属性的元素时，title的值会在鼠标的旁边显示出来。
• alt主要是当图片无法加载的时候用来替代图片的文字内容

无标题.png

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

答：这句话是一个background属性的shorthand，其中的值是background-image、bakground-position、background-repeat三个属性的简写.

• background-image可以为背景引入背景图片，接受的值是一个相对URL地址或绝对URL地址
• background-position可以指定背景图片的初始位置
• background-repeat表示的是背景图片是否重复，默认的值是repeat
  所以这一句话的意思是引入一个背景图片，位置左上角，不重复。

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

答：background-size属性规定背景图像的尺寸，可已用像素值、百分比、em或rem值和一些关键字来设置其值。

值	描述
length	设置背景图像的高度和宽度，第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。
percentage	以父元素的百分比来设置背景图像的宽度和高度。
cover	把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。（背景图像的某些部分也许无法显示在背景定位区域中。）
contain	把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

兼容性：

QQ图片20160811110743.png

IE8以上浏览器均被兼容。

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

答：div是块级元素，要让它水平居中，可以设置div{margin:0 auto;}
图片是行内元素，它的父容器是块级元素且要在父容器上设置text-align:center,可以让图片水平居中。

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

答：(1)rgba(0,0,0,0.5),a表示透明度，0=透明，1=不透明；
(2)opactiy:0.5;filter:Alpha(opacity=50); /* IE8 以及更早的浏览器 */;

• rgba（）的兼容性：IE8以上都兼容

QQ图片20160811112915.png

• opactiy的兼容性：IE8部分支持，以上都兼容

QQ图片20160811113330.png

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

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

QQ图片20160811115957.png

由上面例子可以看出设置opacity不仅改变背景颜色的透明度，还改变了它里面的内容，边框透明度。设置rgba只改变了背景色的透明度，它的内部的内容，边框都不变。