移动端设置, mobile , 一张图片作为背景 ,平铺 ,自动拉伸 , 图片 铺满视界 ,窗口. background-image , background-size, background-repeat

1.  效果:

浏览器:

手机模拟:

2.代码:

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>登陆</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">

     <link rel="stylesheet" href="css/reset.css">
     <style type="text/css">

         .all {
             position: absolute;
             top: 0px;
             left: 0px;
             bottom: 0px;
             right: 0px;
             background-image: url(image/login_bg.png);
             background-size:100% 100%;
             background-repeat: no-repeat;
         }

         .username {
             width: 66%;
             height: 50px;
             margin: 0px auto;
             /*border: 1px solid red;*/

             position: absolute;
             left: 17%;
             bottom: 270px;

             background-color: #DDDDDD;

             border-radius: 4px;
             cursor: pointer;
         }

         #username {
             width: 100%;
             height: 100%;
             font-size: 16px;
             opacity: 0;
         }

         .password {
             width: 66%;
             height: 50px;
             margin: 0px auto;
             /*border: 1px solid red;*/

             position: absolute;
             left: 17%;
             bottom: 200px;

             background-color: #DDDDDD;

             border-radius: 4px;
             cursor: pointer;
         }

         #password {
             width: 100%;
             height: 100%;
             font-size: 16px;
             opacity: 0;
         }

         .loginButton {
             width: 40%;
             height: 50px;
             margin: 0px auto;
             /*border: 1px solid red;*/

             position: absolute;
             left: 30%;
             bottom: 100px;
             font-size: 16px;
             text-align: center;
             background-color: #F37000;
             line-height: 50px;
             color: #fff;

             border-radius: 4px;
             cursor: pointer;
         }

     </style>
 </head>
 <body>
     <div class="all">

         <div class="username">
             <input type="text" name="" id="username" placeholder="用户名">
         </div>

         <div class="password">
             <input type="text" name="" id="password" placeholder="密码">
         </div>

         <div class="loginButton" onclick="jump()">
             登陆
         </div>

     </div>
 </body>

 <script type="text/javascript" src="js/jquery-3.1.1.js"></script>

 <script type="text/javascript">

     $(function(){
         $("#username, #password").focus(function(event) {
             $(this).css('opacity', 1);
         }).focusout(function(event) {
             $(this).css('opacity', 0);
         });

     });

     function jump(){
         window.location.href = 'subject.html';
     }

 </script>
 </html>

关键代码:

         .all {
             position: absolute;
             top: 0px;
             left: 0px;
             bottom: 0px;
             right: 0px;
             background-image: url(image/login_bg.png);
             background-size:100% 100%;
             background-repeat: no-repeat;
         }