这篇文章主要介绍“html5全屏背如何设置”，在日常操作中，相信很多人在html5全屏背如何设置问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”html5全屏背如何设置”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

设计图要标准（750）确认是背景图（通屏底图）应用场景：移动端宣传页面或者活动页面

错误的写法：加到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><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,minimum-scale=1.0"><title>缓存</title><scriptsrc="js/jquery-1.8.2.min.js"></script><scriptsrc="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><divclass="parent">111</div></body>

其他方案:

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title></head><body><divid="Layer1"><imgsrc="https://cache.yisu.com/upload/information/20220118/474/142822.jpg"width="100%"height="100%"/></body></html>

清除浮动:

.float-left{float:left;}.float-right{float:right;}.clear-fix:after{display:table;content:'';clear:both;}

到此，关于“html5全屏背如何设置”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！