关于background-size 的一点小坑

目前在做一个网页，要求使用一个图片作为背景，必须要全屏目填充,于是我想，这不是很简单的事情么：

有两种实现方法：首先设置添加一个div（或者body），把div（或者body）元素的宽和高都设置成100%；然后将图片作为这个div（或者body）的背景图；第二种方法是：将图片放在div（或者body） 中，先将div（或者body） 设置成相对定位或者绝对定位模式，再讲图片设置成绝对定位模式，图片的大小设置为width:100%，height:100%  ;

很遗憾，虽然想法很好，但是没有实现所要的效果，因为图片比较大，所以在竖直方向老是会显示不全（或者出现滚动条），这显然不是我们需要的；我们需要的是，不论屏幕如何变化，背景图始终都保持完全填充整个div（或者body）元素屏幕；从结果看，横向方向实现了效果，竖直方向没有实现，因为显示不全；如下：

首先看将第一种方法：没有达到效果

html 如下：

 <div class="ss">
         <div class="abox abg">
             <div class="shuo">
                 <li class='wen'>一站车后台合作商后台</li>
                 <li class='yin'>One-stop car partner management platform</li>
             </div>
         </div>
         <div class="beian" id='hh'>
             <li class="ash">
                 <span class="eam"> @</span>
                 <span class="nian"> 2017</span>
                 <span class="wangzhi">www.1zhanche.com</span>
                 <span class="wname">一站车</span>
                 <span class="banquan">版权所有</span>
             </li>
             <li class="beili">
                 <span class="touli">ICP备案证书号：</span>
                 <span class="sf">粤ICP备 18086024 号-1</span>
             </li>
         </div>
     </div>

css 如下：

   html {
             width: 100%;
             height: 100%;
         }

   body {
             width: 100%;
             height: 100%;
             background: url("../../img/tubiao/houtai.png")no-repeat;
             background-size: 100%;
   }

运行结果：

第二种方法：将img 做成放到div 中，将高和宽都设置成100%，结果失败，直接显示不出来了

html代码：

  <div class="ss">
         <div class="abox abg">
             <img src="../../img/tubiao/houtai.png" alt="">
             <div class="shuo">
                 <li class='wen'>一站车后台合作商后台</li>
                 <li class='yin'>One-stop car partner management platform</li>
             </div>
         </div>
         <div class="beian" id='hh'>
             <li class="ash">
                 <span class="eam"> @</span>
                 <span class="nian"> 2017</span>
                 <span class="wangzhi">www.1zhanche.com</span>
                 <span class="wname">一站车</span>
                 <span class="banquan">版权所有</span>
             </li>
             <li class="beili">
                 <span class="touli">ICP备案证书号：</span>
                 <span class="sf">粤ICP备 18086024 号-1</span>
             </li>
         </div>
     </div>

css代码：

 body {
     font-family: "Microsoft YaHei";
     width: 100%;
     height: 100%;
 }

 div.ss {
     position: relative;
     width: 100%;
     height: 100%;
 }

 div.abox {
     position: relative;
     width: 100%;
     height: 100%;
 }

 div.abox img {
     position: absolute;
     left:;
     top:;
     height: 100%;
     width: 100%;
 }

运行结果：直接显示不出来了，如下

看到这两个结果：直接懵圈了，咋个不行呢？

再履历一次，在第一中方法中，background-size是有两个参数的，如果只填写一个参数，就会默认第一参数为 auto,就不会是100%；第一个参数是x方向上的百分比或者 px 值，第二个参数是y方向上的百分比或者 px值

下面我们把background-size 的两个值都设置一下，看看结果如何：

html 代码还是和上面（第一种）是一样的；

css代码变更如下：只是在background-size:的y方向加了一个参数 100%

  html {
             width: 100%;
             height: 100%;
         }

         body {
             width: 100%;
             height: 100%;
             background: url("../../img/tubiao/houtai.png")no-repeat;
             background-size: 100% 100%;
         }

运行结果：ok了，如下：

至于第二种为什么没有达到预计效果，我暂时没有想出来，留到以后再解决.........

后记备注：在css 中，background 有两个值，一个是x方向上的值 px 或者百分比，另一个是y方向上的 px 或者百分比