以下1,2两个关键元素
body{
  width:100%;
  height:100%;
  position:relative; //1
}
.login-form {
width: 100%;
background:url(./img/loginbg.png) no-repeat;
height:100%;
background-size: 100% 100%;
position: absolute; //2
background-position:center;
z-index:4;
}

背景图宽高100%无法无法显示的问题【body设置relative，当前元素absolute】的更多相关文章

  1. body和普通div背景图宽高百分比的区别

    body和普通div背景图的区别  background: url(//m.360buyimg.com/mobilecms/s220x220_jfs/t2746/167/831241799/29915 ...

  2. css背景图片拉伸 以及100% 满屏显示

    如何用css背景图片拉伸 以及100% 满屏显示呢?这个问题听起来似乎很简单.但是很遗憾的告诉大家.不是我们想的那么简单. 比如一个容器(body,div,span)中设定一个背景.这个背景的长宽值在 ...

  3. 背景图height：100%显示

    这段时间,写移动端页面,总是遇到背景图在不同的设备上的显示拉伸问题: 本来想写百分比,可是并没有显示,又不想media@ ,换一种思路用img写 群友提供了一个办 html,body{height:1 ...

  4. html-css控制背景图全屏拉伸不重复显示

    在HTML中,当我们设置背景图,只能采用是否重叠.居中.重叠方向这几个选项 CSS3中设置 body { background:#3d71b8 url(../back_main.png); backg ...

  5. 百度地图设置div样式宽高为百分比不显示地图

    如题,不显示地图只要在样式代码里面加以 position:absolute; 代码就可以了 <style type="text/css"> body, html,#al ...

  6. css固定背景图位置 实现屏幕滚动时 显示背景图不同区域

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  7. css背景图充满屏幕

    代码: body { /* 加载背景图 */ background: url(resource/inv_bg.png); /* 背景图不平铺 */background-repeat: no-repea ...

  8. 【经验总结】关于使用某些第三方插件库元素设置display:none后重新show不显示的问题；（display、opacity、宽高0的使用场景）

    display:none 直接取消元素所占用的位置(但是元素还是存在的),后面元素看他就相当于不存在了: opacity:0  隐藏,但是其依旧占用位置: height.width:0 和displa ...

  9. css3处理sprite背景图压缩来解决H5网页在手机浏览器下图标模糊的问题

    近期在负责一个微信H5 App项目,遇到一个郁闷的问题,手机浏览器查看网页时图标都是模糊的,有锯齿,电脑浏览器显示则是正常.大概知道是分辨率适配等类型的问题,后来网上查找了一些办法.大部分的解决方式都 ...

随机推荐

  1. SVN创建分支主干策略

    本篇目录 前言 SVN分支管理策略 VisualSVN Server TortoiseSVN客户端 Repository的创建 Check out trunk创建新项目MyProject trunk更 ...

  2. include_once与require_once的区别

    ①作用及用法  可以减少代码的重复 include(_once)("文件的路径")与require(_once)("文件的路径") ②理解 说白了,就是用包含进 ...

  3. apache 二级域名设置完整步骤

    步骤如下: 1. 你要拥有一个有泛域名解析的顶级域名,例如:abc.com 在dns服务上设置,域名服务商都提供此服务 www.abc.com      指向服务器IPabc.com          ...

  4. 设备重力感应 window.DeviceOrientationEvent

    设备屏幕方向与运动 https://developers.google.cn/web/fundamentals/native-hardware/device-orientation/ MDN devi ...

  5. C# 各类常见Exception 异常信息

    一直对报错有些迷惑的地方,什么时候try,catch那些Exception更合适,报错信息更能快速定位问题所在... 转载链接← 正文 Exception: 所有异常对象的基类. SystemExce ...

  6. 一次Flannel和Docker网络不通定位问题

    一次Flannel和Docker网络不通定位问题    查看路由表的配置 路由表情况 [root@k8s-master ~]# route -n Kernel IP routing table Des ...

  7. End-to-end and Hop-by-hop Headers ---nginx-websocket

    https://www.oschina.net/translate/websocket-nginx 13.5.1 End-to-end and Hop-by-hop Headers For the p ...

  8. PHP进阶-网络编程基础概念

    以太网协议图: 以太网协议: 发送header(发送至mac地址,接收者mac地址).data到网线中所有连接的计算机,然后每个机子接收数据包的时候都是用以太网协议的, 然后解析header头,看是否 ...

  9. 内部排序->插入排序->其它插入排序->表插入排序

    文字描述 和之前的插入排序比,表插入排序可以保证排序过程中不移动记录:因此表插入排序所用的存储结构和之前的顺序存储不同,表插入排序采用静态链表类型作为待排记录序列的存储结构,设数组中下标0的分量为表头 ...

  10. 【Python学习 】Python获取命令行参数的方法

    背景 最近编写一个python程序的时候,需要去获取python命令行的参数,因此这里记录下如何获取命令行参数的方法. 一.sys 模块 在 Python 中,sys 模块是一个非常常用且十分重要的模 ...