任务9-2

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

• CSS Sprite指的是一种CSS图像合并技术，是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。
• 作用:雪碧图的应用可以减少网站的HTTP请求数量，提升网站加载性能，对内存和带宽更加友好，提高用户体验度。

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

• 对于固定不变的内容，如图标等用css背景图。对于可变的内容，图片是和内容相关的，用img标签；

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

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

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

• 插入一张背景图为abc.png的图片，横纵位置都不偏移，图片是不重复的；

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

• background-size规定背景图像的尺寸;

• 兼容性:

  
  
  
• 常用的值：
• background-size:cover;把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
• background-size:contain; 把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

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

• div水平居中：
  设置宽度然后用margin: 0 auto;属性；
• 图片水平居中
  • 1.在不设置宽度和高度的情况下因为img是行内元素，所以先变为块级元素,用display:block; margin:0 auto;这两个属性一起使用才可以;
  • 2.给图片添加一个父容器，在图片的父容器上设置text-align:center;属性就能使图片水平居中；

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

• 通过opacity：0~1设置元素透明;它的属性值1表示完全不透明，0表示完全透明。可用以下方法补充：filter: alpha(opacity=0~100); background: rgba（255,0,0,0~1）来设定，其值越靠近0越透明;

• 兼容性如下:

  
  
  
  

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

• opacity设置透明，子元素会继承，会使整体都透明;
• rgba子元素则不会继承,一般用于设置背景的透明度;