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>


    • 精彩推荐

    • 2018-12-26 16:12:56

      nginx+php-fpm模式php内存泄漏探究

      这里要重点说一下第三步骤。第三步涉及到php-fpm进程生命周期的东西。一个php-fpm的生命周期大致是这样的：模块初始化（MINIT）-> 模块激活（RINIT）-> 请求处理 -> 模块停用（RSHUTDOWN） -> 模块激活（RINIT）-> 请求处理 -> 模块停用（RSHUTDOWN）……. 模块激活（RINIT）-> 请求处理 -> 模块停用（RSHUTDOWN）-> 模块关闭（MSHUTDOWN）。在一个php-fpm进程的生命周期里，会有多次的模块激活（RINIT）-> 请求处理 -> 模块停用（RSHUTDOWN）的过程。这个“请求处理”的大致过程是这样的：php读取相应的php文件，对其进行词法分析，生成opcode，zend虚拟机执行opcode。

    • 2019-01-01 21:38:51

      php使用curl设置超时的重要性

      网站登录不了，原因是没有可用的 PHP 子进程来响应新的请求了。这可能是是由于PHP-curl 没有设置超时时间引起的。

    • 2019-01-01 21:42:34

      php-fpm 启动参数及重要配置详解

      如果file_get_contents请求的远程资源如果反应过慢，file_get_contents就会一直卡在那里不会超时。我们知道php.ini 里面max_execution_time 可以设置 PHP 脚本的最大执行时间，但是，在 php-cgi(php-fpm) 中，该参数不会起效。真正能够控制 PHP 脚本最大执行时间的是 php-fpm.conf 配置文件中的request_terminate_timeout参数。