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-12-07 15:04:03

      node开发邮件系统总结

      因为multipart这种形式比较复杂，因此要利用boundary分割符，将邮件体分割成不同段来进行解析，boundary分为父段和子段，父段一般出现0次或1次，出现在末尾，每个子段中也有content-type和boundary，需要在进行解析，如果遇到i,iii里面的情况可直接解析，如果遇到ii中的情况，再按ii中的步骤进行解析

    • 2020-12-07 15:17:45

      email-templates + mjml 发送邮件

      mjml 是一个很不错的响应式邮件html 内容标签库，email-templates 是一个灵活强大的邮件发送框架，两者集成起来我们 可以设计灵活强大的邮件发送系统，以下是一个简单的集成使用，实际使用还有好多地方需要完善

    • 2020-12-07 15:19:00

      响应式邮件的编写插件介绍mjml

      以前做项目碰到发邮件的需求，邮件模板的编辑就是一件头疼的事。因为虽说邮件是支持 HTML 的，但是确是 HTML 子集程度的支持，所以存在必须通过 <table> 排版的恶心之处，还有很多兼容性的坑。本质上是各家邮件商的标准有差异吧。

    • 2020-12-07 16:14:22

      nodejs队列实现amqplib,rabbitmq

      其中StartConsumer 会在项目启动时启动，在整个生命周期中一直保持监听状态，在程序结束时mq的链接关闭。需要注意的是 noAck 这个参数，当为false是表示消息出队后不会自动删除，如果设置成true,则无论消息处理成功与否此消息会被删除。注意到在消息不成功是，调用了ch.nack(msg))，此方法是将消息重新入队。

    • 2020-12-07 16:15:46

      RabbitMQ详解

      当前市面上mq的产品很多，比如RabbitMQ、Kafka、ActiveMQ、ZeroMQ和阿里巴巴捐献给Apache的RocketMQ。甚至连redis这种NoSQL都支持MQ的功能。 ActiveMQ ActiveMQ是apache出品，最流行的，能力强劲的开源消息总线，并且它一个完全支持JMS规范的消息中间件。其丰富的API、多种集群构建模式使得它成为业界老牌消息中间件，在中小型企业中应用广泛。

    • 2020-12-07 16:17:53

      nodejs用redis实现队列操作

      其实nodejs实现队列的方式又很多中，也有很多开源的插件和队列数据库可以使用，但是呢，如果我们一个简单的项目，完全可以使用redis来实现队列， 这样再不增加技术难度的同事，我们也就可以完美的实现一个队列

    • 2020-12-07 22:02:44

      intellij idea远程开发的几个想法

      我之前是用idea上面自带的stfp来做的本地开发同步到linux服务器编译，但是我发现这个如果多个客户端同时开发，或者多个同事一起开发，服务器上的就不能更新到本地。是不能增量更新到本地，必须全部下载，比对下载也行，但是工程量打了就特别慢。