第二十一节 屏幕适配之背景图尺寸的设置 

 1 <!-- background-size 新属性
 2         1、length：用长度指定背景图的大小，不允许负值
 3         2、percentage：用百分比指定背景图大小，不允许负值
 4         3、auto：缺省值，背景图的真实大小
 5         4、cover：将背景图等比缩放到完全覆盖容器，背景图有可能超出容器
 6         5、contain：将背景图等比缩放到宽度或者高度与容器的宽度或者高度相等，背景图像始终被包含在容器内 -->
 7 
 8 <!DOCTYPE html>
 9 <html lang="en">
10 <head>
11     <meta charset="UTF-8">
12     <title>Document</title>
13     <style type="text/css">
14         .box{
15             width: 200px;
16             height: 200px;
17             border: 2px solid #000;
18             margin: 50px auto 0;
19             background: url(图片1.png) no-repeat;
20             background-size: 200px 200px;
21             background-size: 100% 100%;
22             background-size: cover;
23             background-size: contain;
24         }
25     </style>
26 </head>
27 <body>
28     <div class="box"></div>
29 </body>
30 </html>

 

posted @ 2020-03-14 16:27  kog_maw  阅读(317)  评论(0)    收藏  举报