background-size设置对象的背景图像的尺寸大小
- <length>用长度值指定背景图像大小,不允许负值;=>background-size:X轴尺寸大小 Y轴尺寸大小
- <percentage>用百分比指定背景图像大小,不允许负值;
- auto背景图像的真实大小;
- cover将背景图像等比缩放到完全覆盖容器,背景图像有可能超出容器;
- contain将背景图像等比缩放到宽度或高度与容器的宽度或高度相等,背景图像始终被包含在容器内;
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 .pic{ 8 width: 2400px; 9 height: 1600px; 10 background: url(https://mobike.com/cn/assets/themes/moby/img/landing/hero-bg-4.jpg) no-repeat; 11 /* background-size: 500px 500px; */ 12 background-size: 50% 50%; 13 } 14 </style> 15 </head> 16 <body> 17 <div class="pic"></div> 18 </body> 19 </html>