task9-2

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

CSS雪碧的基本原理是把你的网站上用到的一些图片整合到一张单独的图片中.
作用：

1. 减少加载网页图片时对服务器的请求次数
2. 提高页面的加载速度
3. 减少鼠标滑过的一些bug

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

如下场景使用img标签比较合适：

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

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

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

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

设置一张地址为abc.png的背景图片，其相对于父容器便宜量为0，图片不平铺

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

用于规定背景图的大小

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

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

div水平居中用margin：0 auto；
图片水平居中设置text－align：center；

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

opacity:0~1;0为全透明，1为原图。

Paste_Image.png

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

opacity会影响所有后代元素，rgba不会影响后代元素。

雪碧图
iconfont
三角形