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>


    • 精彩推荐

    • 2021-02-03 16:59:59

      iOS 静态库和动态库全分析

      库就是程序代码的集合，将 N 个文件组织起来，是共享程序代码的一种方式。从本质上来说是一种可执行代码的二进制格式，可以被载入内存中执行。

    • 2021-02-03 17:01:30

      iOS库 .a与.framework区别

      静态库：连接时完整地拷贝至可执行文件中，被屡次使用就有多份冗余拷贝。 动态库：连接时不复制，程序运行时由系统动态加载到内存，供程序调用，系统只加载一次，多个程序共用，节省内存。

    • 2021-02-03 17:13:58

      iOS - 封装静态库

      静态库：链接时完整的拷贝至可执行文件中，被多次使用就有多份冗余拷贝，.a的静态库 .framework的静态库

    • 2021-02-03 17:16:07

      iOS 中的动态库、静态库和 framework

      首先来看什么是库，库(Library)说白了就是一段编译好的二进制代码，加上头文件就可以供别人使用。 什么时候我们会用到库呢？一种情况是某些代码需要给别人使用，但是我们不希望别人看到源码，就需要以库的形式进行封装，只暴露出头文件。另外一种情况是，对于某些不会进行大的改动的代码，我们想减少编译的时间，就可以把它打包成库，因为库是已经编译好的二进制了，编译的时候只需要 Link 一下，不会浪费编译时间。

    • 2021-02-03 17:17:53

      iOS 同一个工程下打包不同的app

      应用图标，启动画面，应用启动后的首页都不一样。 有些课程（例如公务员考试和高考）是有目标考试的概念，不同的目标考试大纲是不一样的。拿高考来举例，北京的高考和上海的高考，就有着完全不一样的考试大纲。高考的文科和理科，又有着完全不同的考试科目。 有些课程会有一些自定义的界面，例如高考的应用可以设置昵称，有些课程的真题练习中是有推荐真题模块的，而有些课程又没有。 有些课程有扫描答题卡功能，有些课程有考前冲刺功能，有些课程有大题专项查看功能，而有些课程又没有上述功能。另外还有一些微小细节，但是解决方法和类似，所以就不一一展开说明。

    • 2021-02-04 14:02:30

      window软件界面找不到了跑到屏幕外面去了

      一般可以这样操作，按Alt+空格，然后按M，然后用上下左右键把窗口移动到能看到的地方，再按回车。有些第三方的软件可能不能用，大部分都可以这样做。

    • 2021-02-04 14:08:13

      基于 Electron 的爬虫框架 Nightmare

      Electron 可以让你使用纯 JavaScript 调用 Chrome 丰富的原生的接口来创造桌面应用。你可以把它看作一个专注于桌面应用的 Node.js 的变体，而不是 Web 服务器。其基于浏览器的应用方式可以极方便的做各种响应式的交互，接下来介绍下关于 Electron 上衍生出的框架 Nightmare

    • 2021-02-04 20:13:02

      iOS framework制作及使用(包含xib和图片)

      静态库与动态库简介: 静态库:链接使用时完整地拷贝至可执行文件中 动态库:链接时不复制,程序运行时由系统动态加载到内存,供程序调用,系统只加载一次 本文制作framework对应xcode版本:10.1