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-11-18 14:34:00

      当你写爬虫抓不到APP请求包的时候该怎么办？

      提示：因为高级篇以后的APP将无法使用很通用的方式处理，每种类型甚至是每个APP的反抓包处理方式都会有差别，所以这个系列以后会以【高级篇-具体类型】的形式来写。

    • 2020-11-21 20:41:51

      Kotlin Sealed class类详解

      Sealed class（密封类） 是一个有特定数量子类的类，看上去和枚举有点类似，所不同的是，在枚举中，我们每个类型只有一个对象（实例）；而在密封类中，同一个类可以拥有几个对象。

    • 2020-11-22 20:53:43

      Dagger2之Kotlin写法

      修饰构造方法 修饰变量，在宿主类里，引入要注入的实例

    • 2020-11-22 20:56:13

      Dagger2使用详解

      简单的说，就是一个工厂模式，由Dagger负责创建工厂，帮忙生产instance。遵从Java规范JSR 330，可以使用这些注解。现在不研究Dagger2是如何根据注解去生成工厂的，先来看看工厂是什么东西，理解为什么可以实现了DI(Dependency Injection)，如何创建IoC(Inverse of Control)容器。

    • 2020-11-22 21:00:28

      dagger.android--Fragment，BaseFragment

      1 使用Fragment参数来代替Activity参数 2 使用 @FragmentKey来代替@ActivityKey 3 使用HasFragmentInjector来代替@HasActivityInjector 4 AndroidInjection.inject(Fragment)方法,在Fragment的onAttach()中调用，而不是在onCreate()中 5 Fragment的Module添加位置，和Activity是不同的，它取决于Fragment需要的其他依赖注入

    • 2020-11-22 21:12:30

      Dependency Injection with Dagger2,Fragment

      標註@Provides的method若有parameter的話，Dagger會找出其擁有的該型態物件來使用。我們在Module內新增了DataModel將其列入Dagger的管理下，接著在provideFactory()增加parameter變成provideFactory(DataModel dataModel)，Dagger就會找出其管理的DataModel給provideFactory使用。

    • 2020-11-22 22:58:52

      Android LiveData Transformations

      有时候有这样的需求，需要在LiveData将变化的数据通知给观察者前，改变数据的类型；或者是返回一个不一样的LiveData。

    • 2020-11-22 23:00:16

      androidx中的lifecycle组件

      Lifecycle-aware components生命周期感知组件执行操作，以响应另一个组件生命周期状态的更改，例如Activity和Fragment。这些组件可以帮助您生成更有组织、更容易维护的轻量级代码。