HTML5 body设置全屏背景图片 如何让body的背景图片自适应整个屏----实战经验

2020-03-04 20:48:57

参考链接 HTML5 body设置全屏背景图片 如何让body的背景图片自适应整个屏----实战经验

用什么代码实现？不允许有白色底色产生，因为手机高度不一样

错误的写法：加到div中结合图片设置min-height，但是页面不会回弹

话不多说直接上代码

终极方案

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

再加一段

body{font-family: "华文细黑";background:url("../img/Flyer-bg.png") no-repeat;background-size: 100%;}

就是这么简单，但是好多人想不到。

一个hack方案解决垂直剧中问题

<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,minimum-scale=1.0"><title>缓存</title><script src="js/jquery-1.8.2.min.js"></script><script src="js/store.min.js"></script><style>.parent{width:200px;height: 200px;/* 以下属性垂直居中 */position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;background-color: #aaa;}</style></head><body><div class="parent">111</div></body>

其他方案

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><div id="Layer1" style="position:fixed; left:0px; top:0px; width:100%; height:100%">  <img src="https://www.qianbuxian.com/uploads/banners/20171214085954_shouye5.jpg" width="100%" height="100%"/>  </body></html>


    • 精彩推荐

    • 2019-01-29 14:33:07

      child_process中spawn和exec方法的使用

      child_process是nw.exe的一个内置模块，通过它可以实现创建多线程，并可实现主线程和子线程之间的通信。child_process模块中主要使用有两个方法spawn和exec，这两个方法都可以用来创建子线程。除了spawn和exec外，child_process模块还有execFile,fork,spawnSync,execFileSync,execSync，它们都是基于spawn的不同封装。 --------------------- 作者：黄泽平 来源：CSDN 原文：https://blog.csdn.net/zeping891103/article/details/52230175 版权声明：本文为博主原创文章，转载请附上博文链接！

    • 2019-01-29 14:50:51

      Node.js 编写跨平台 spawn 语句

      Node.js 是跨平台的，也就是说它能运行在 Windows、OSX 和 Linux 平台上。很多 Node.js 开发者都是在 OSX 上做开发的，然后再将代码部署到 Linux 服务器上。由于 OSX 和 Linux 都是基于 Unix 的，因此两者共性很多。Windows 也是 Node.js 官方支持的平台，只要你通过正确的方式写代码，就能在各个平台上毫无压力的跑起来。

    • 2019-01-30 17:53:21

      视图与临时表

      视图与表的不同之处：视图是一个虚表，即视图所对应的数据不进行实际存储，数据库只存储视图的定义，对视图的数据进行操作时，系统根据视图的定义去操作与视图相关联的基本表。

    • 2019-02-01 08:43:59

      JS 随机排序算法

      使用JS编写一个方法 让数组中的元素每次刷新随机排列