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-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。这些组件可以帮助您生成更有组织、更容易维护的轻量级代码。

    • 2020-11-22 23:02:50

      Android数据存储之DataBase的Room

      Room是Google在AndroidX中提供的一个ORM(Object Relational Mapping，对象关系映射)库。它是在SQLite上提供的一个抽象层，可以使用SQLite的全部功能，同时可以更好更便捷流畅地访问数据库。（关于AndroidX可以参考

    • 2020-11-22 23:04:39

      Android组件 LiveData与MutableLiveData教程

      LiveData与ViewMode是经常搭配在一起使用的,但是为了不太混乱,我还是拆分开来说明,此篇博客只讲解 LiveData 与 MutableLiveData的概念与使用方式(但是会涉及到ViewMode的部分代码).

    • 2020-11-22 23:14:52

      Dagger 2 在 Android 上的用法

      在前面的文章我们介绍了Dagger2 中的大部分注解的使用，接下来我们从源码角度分析下第一篇文章中例子的原理。

    • 2020-11-22 23:18:59

      Android开发从Dagger2迁移至Kodein的感受

      最近个人在尝试构建 Kotlin版本 的Android MVVM开发框架，在依赖注入框架的选型上，我最终选择了 Kodein 。这是一个非常轻量级的DI框架，相比于配置繁琐的Dagger（繁琐的配置也是导致Dagger学习成本一直居高不下的原因！），它的配置过程更清晰且简单，并且，这个库的源码也是 Kotlin 的。

    • 2020-11-22 23:25:56

      Dagger2源码解析inject过程

      添加inject后，通过编译生成的DaggerMainComponent类来导入，说明编译以后生成了一些类，那到底生成了什么类呢。 Module和Component又是什么，该怎么里理解 在这篇文章后里将一一讨论。