1

1.png

效果:

2.png

2

3.png

效果:

4.png

3

5.png

效果:

6.png

4 background-size的用法

7.png

注意:盒子的大小是: 

宽度:500px 高度:150px;

图片的实际大小:宽度:533px  高度:300px;

此时的效果:

8.png

注意:宽度是100%  高度是auto:

所以超出的部分会隐藏掉

另一种情况:

13.png

此时的效果:

14.png

此时图片的高度小于容器的高度 所以容器多出了很多空白地方

所以说:background:100%; 是有两种呈现的效果。要么隐藏掉多余的部分图片，要么容器活出空白地方

5 

9.png

此时的效果:

10.png

6 11.png

此时的效果:

12.png

此时图片并没有显示完全


总结:

background-size:100%;       // 宽度100% 高度auto(按图片本身的宽/高比进行缩放显示) 这种不一定会铺满整个容器 也有可能超出的部分会被隐藏掉

backgrond-size:100% 100%;      // 宽度100% 拉伸 高度也是100% 拉伸  这种一定会铺满整个容器

background-size:cover;    // 也会铺满整个容器大小 图片比例不变