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;

         }

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

  1. 移动端（视口(meta)，像素比，二倍图(图片，背景图，精灵图)，css初始化(normalize.css)，特殊样式，常见屏幕尺寸）

    1. 视口:(布局视口(layout viewport),视觉视口(visual viewport),理想视口(ideal viewport)) meta 视口标签 <meta  name = ...

  2. C#word（2007）操作类--新建文档、添加页眉页脚、设置格式、添加文本和超链接、添加图片、表格处理、文档格式转化

    转:http://www.cnblogs.com/lantionzy/archive/2009/10/23/1588511.html 1.新建Word文档 #region 新建Word文档/// &l ...

  3. Java将数据按列写入Excel并设置格式（字体、背景色、自动列宽、对齐方式等）

    本文使用jxl.jar工具类库将数据按列写入Excel并设置格式(字体.背景色.自动列宽.对齐方式等). /** * 按列写入Excel并设置格式 * * @param outputUrl * 输出路 ...

  4. 【小梅哥SOPC学习笔记】设置Eclipse在编译(build）前自动保存源代码文件

    设置Eclipse在编译(build)前自动保存源代码文件 Eclipse 常用设置之让Eclipse在编译(build)前自动保存源代码文件 一.让Eclipse在编译(build)前自动保存源代码 ...

  5. 安卓ImageView.src设置图片拉伸、填满控件的方法

    代码改变世界 安卓ImageView.src设置图片拉伸.填满控件的方法 需要给你的ImageView布局加上Android:adjustViewBounds="true"

  6. YTU 2598: 编程题B-小平智斗自动售货机

    2598: 编程题B-小平智斗自动售货机 时间限制: 1 Sec  内存限制: 128 MB 提交: 268  解决: 69 题目描述 LYH自动售货机在销售商品时,具有自动找钱功能.但是找零的最小单 ...

  7. table 设置自动宽度后 td 的固定宽度 在 谷歌浏览器自动拉伸

    table   设置自动宽度后   td 的固定宽度  在 谷歌浏览器自动拉伸 解决方案 <table style="table-layout:fixed;">

  8. 如何从一张图片中裁剪一部分距形图片另存为文件（使用Canvas.CopyRect）

    如何从一张图片中裁剪一部分距形图片另存为文件? Delphi / Windows SDK/APIhttp://www.delphi2007.net/DelphiMultimedia/html/delp ...

  9. 移动端设置-----rem

    对于现在不同尺寸的移动端屏幕,如果设置px来说实在有点影响用户体验,在小屏幕上太大,大屏幕上太小,不能实现响应式,所以就引进了rem的概念. rem是相对于根元素<html> 在我的项目中 ...

随机推荐

  1. vue 基础（二）

    Vue对象提供的属性功能 一.过滤器 过滤器,就是vue允许开发者自定义的文本格式化函数,可以使用在两个地方:输出内容和操作数据中. 1. 全局过滤器 Vue.filter 写在vm 对象外.必须要有 ...

  2. Java编码 蛇形矩阵的构建与遍历输出

    一.蛇形矩阵的构建,并按行输出 例: 输入:n, 生成n*n的蛇形矩阵 1 2 3 8 9 4 7 6 5 输出:1 2 3 8 9 4 7 6 5 java编码 public static void ...

  3. python中for循环的底层实现机制 迭代

    在python中,存在2种循环方式:for循环和while循环. while循环的实现很简单, 其本质就是一个条件语句,自定义条件,当条件满足的时候,不断执行while代码块. 但是for循环,究竟是 ...

  4. python-flask-wtforms组件流程源码

    在最开始要弄明白一点,类都是由元类创建的.在定义类 class Foo:pass的时候(类也是对象),就会执行type类或者type派生类的__init__方法,当Foo()时:执行type类或者ty ...

  5. commonJS,常用js工具方法

    说明:平时项目用到的一些常见过滤方法,有些是vue过滤器,稍微修改下吧,我就不改了. js四舍五入不准确的解决(重写方法): Number.prototype.toFixed = function(l ...

  6. mybatis的update使用选择

    更新后台设置时,会分多个页面更新同一个表中的数据,愿想是尽量减少sql请求数据量并且减少重复代码. 比如博客园的: 假如只有一个用户信息表,这样的话每个页面只更新部分字段. 这种情况下的更新推荐在xm ...

  7. 详谈Oracle12c新特点容器数据库&amp;可插拔数据库（CDB&amp;PDB）

    一般信息 数据字典 CDB_FILE$ DBA_PDBS PDB$SEED CDB_LOCAL_ADMINAUTH$ DBA_PDB_HISTORY PDB_HISTORY$ CDB_PDB_SAVE ...

  8. 前端基础之CSS的引入+HTML标签选择器+CSS操作属性

    clear:left/ringt属性 CSS:语法形式上由选择器+以及一条或多条声明组成:选择器查找到指定的html标签后,使用css属性设置html标签的样式:                   ...

  9. MySQL安装教程（mysql5.6_bundle）

    1.下载软件包 下载链接:https://dev.mysql.com/downloads/mysql/5.6.html#downloads centos6--MySQL-5.6.35-1.el6.x8 ...

  10. WINDOWS中, 如何查看一个运行中的程序是64位还是32位的

    转自:https://blog.csdn.net/dayday3923/article/details/78597453?locationNum=7&fps=1 方法一: 任务管理器法任务管理 ...