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>


    • 精彩推荐

    • 2020-04-03 19:13:05

      Express-session的使用

      当浏览器访问服务器并发送第一次请求时，服务器端会创建一个 session 对象，生成一个类似于 key,value 的键值对，然后将 key(cookie)返回到浏览器(客户)端，浏览器下次再访问时，携带 key(cookie)， 找到对应的 session(value)。 客户的信息都保存在 session 中

    • 2020-04-08 22:46:28

      Element的操作方法

      Element 是一个通用性非常强的基类，所有 Document 对象下的对象都继承自它。这个接口描述了所有相同种类的元素所普遍具有的方法和属性。一些接口继承自 Element 并且增加了一些额外功能的接口描述了具体的行为。例如， HTMLElement 接口是所有 HTML 元素的基本接口，而 SVGElement 接口是所有 SVG 元素的基础。大多数功能是在这个类的更深层级（hierarchy）的接口中被进一步制定的。

    • 2020-04-12 17:42:43

      Node.js设置CORS跨域请求中多域名白名单的方法

      在Node.js中，res的响应头Header中的 Access-Control-Allow-Origin 属性不能匹配除 (*) 以外的正则表达式的，域名之间不能也用逗号分隔。也就是说， Access-Control-Allow-Origin 的属性值只允许设置为单个确定域名字符串或者 (*)。

    • 2020-04-14 09:40:59

      CSS3实现文字描边的2种方法

      首先想到去看CSS3有没有什么属性可以实现，后来被我找到了text-stroke 　 　　该属性是一个复合属性，可以设置文字宽度和文字描边颜色 　 　　 该属性使用很简单：text-stroke:1px #f00;（1px是文字宽度，#ff是文字描边颜色）

    • 2020-04-14 09:42:47

      用 TypeScript 编写 npm 模块

      自从开始使用 Node.js 已经一年多，写的代码越多，越是觉得自己提高的越慢。想来应该有没有将单一功能的代码封装在一个独立模块，而导致代码稍微多一点就维护困难的原因。

    • 2020-04-14 09:46:25

      TypeScript 入门教程

      TypeScript 是 JavaScript 的超集，扩展了 JavaScript 的语法，因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改，TypeScript 通过类型注解提供编译时的静态类型检查。 TypeScript 可处理已有的 JavaScript 代码，并只对其中的 TypeScript 代码进行编译。