background-size设置背景图像的尺寸大小

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>
posted @ 2020-10-30 17:34  鬼牛阿飞  阅读(1252)  评论(0)  编辑  收藏  举报