13518219792
1
创新互联主要从事成都网站制作、成都做网站、外贸营销网站建设、网页设计、企业做网站、公司建网站等业务。立足成都服务顺昌,10多年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18982081108
效果:
2
效果:
3
效果:
4 background-size的用法
注意:盒子的大小是:
宽度:500px 高度:150px;
图片的实际大小:宽度:533px 高度:300px;
此时的效果:
注意:宽度是100% 高度是auto:
所以超出的部分会隐藏掉
另一种情况:
此时的效果:
此时图片的高度小于容器的高度 所以容器多出了很多空白地方
所以说:background:100%; 是有两种呈现的效果。要么隐藏掉多余的部分图片，要么容器活出空白地方
5
此时的效果:
6 
此时的效果:
此时图片并没有显示完全
总结:
background-size:100%; // 宽度100% 高度auto(按图片本身的宽/高比进行缩放显示) 这种不一定会铺满整个容器 也有可能超出的部分会被隐藏掉
backgrond-size:100% 100%; // 宽度100% 拉伸 高度也是100% 拉伸 这种一定会铺满整个容器
background-size:cover; // 也会铺满整个容器大小 图片比例不变
