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-09-26 13:25:38

      git合并时冲突<<<<<<< HEAD

      head 到 =======里面的lalala是自己的commit的内容 =========到 >>>>>>里面的hehehe是下拉的内容

    • 2019-09-26 18:57:29

      Java中数组怎么深度复制

      有时候循环进行一些操作，放入list，发现，list中的数据都是一个数据，这就尴尬了，我们需要深度复制，才能解决这个问题。或者生成新的，也就是深度复制。

    • 2019-09-26 19:03:33

      spring post jackson的反序列化需要无参构造函数

      JSON parse error: Cannot construct instance of `com.**` (although at least one Creator exists): cannot deserialize from Object value (no delegate- or property-based Creator); nested exception is com.fasterxml.jackson.databind.exc.MismatchedInputException: Cannot construct instance of `com.**` (although at least one Creator exists): cannot deserialize from Object value (no delegate- or property-based Creator)  at [Source: (PushbackInputStream); line: 2, column: 2]] ———————————————— 版权声明：本文为CSDN博主「冰夏之夜影」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/u011561335/article/details/91346777

    • 2019-09-26 21:46:36

      Shiro整合JWT+Token过期刷新，demo，详解

      最近使用SpringBoot集成Shiro，JWT快速搭建了一个后台系统，Shiro前面已经使用过，JWT（JSON Web Tokens）是一种用于安全的传递信息而采用的一种标准。Web系统中，我们使用加密的Json来生成Token在服务端与客户端无状态传输，代替了之前常用的Session。 系统采用Redis作为缓存，解决Token过期更新的问题，同时集成SSO登录，完整过程这里来总结一下。

    • 2019-09-26 21:48:15

      解决UEditor超出最大字数后只提示不限制的问题

      最近项目用到百度额UEditor文本编辑器，今天测试向我提出了一个问题。就是在输入的文字超过默认的最大字数限制之后，虽然提示“字数超过最大范围，服务器可能拒绝保存”，但是仍然可以点击保存按钮进行保存。

    • 2019-09-27 14:49:33

      Google Guava介绍和体检

      JDK提供的String还不够好么？也许还不够友好，至少让我们用起来还不够爽，还得操心！举个栗子，比如String提供的split方法，我们得关心空字符串吧，还得考虑返回的结果中存在null元素吧，只提供了前后trim的方法（如果我想对中间元素进行trim呢）。