HTML5 body设置全屏背景图片的示例代码


Posted in HTML / CSS onDecember 08, 2020

用什么代码实现?不允许有白色底色产生,因为手机高度不一样

设计图要标准(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>
    <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>

清除浮动

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

到此这篇关于HTML5 body设置全屏背景图片的示例代码的文章就介绍到这了,更多相关html5 body背景图片自适应屏内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
css3实现3d旋转动画特效
Mar 10 HTML / CSS
使用CSS3和Checkbox实现JQuery的一些效果
Aug 03 HTML / CSS
实例讲解CSS3中的box-flex弹性盒属性布局
Jun 09 HTML / CSS
5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)
Aug 15 HTML / CSS
css3 column实现卡片瀑布流布局的示例代码
Jun 22 HTML / CSS
移动端适配 使px自动转换rem
Aug 26 HTML / CSS
CSS3 实现倒计时效果
Nov 25 HTML / CSS
使用HTML5的链接预取功能(link prefetching)给网站提速
Dec 13 HTML / CSS
html5读取本地文件示例代码
Apr 22 HTML / CSS
html5中 media(播放器)的api使用指南
Dec 26 HTML / CSS
VSCode 自定义html5模板的实现
Dec 05 HTML / CSS
AmazeUI导航的示例代码
Aug 14 HTML / CSS
Html5基于canvas实现电子签名并生成PDF文档
Dec 07 #HTML / CSS
HTML5基于flash实现播放RTMP协议视频的示例代码
Dec 04 #HTML / CSS
前端水印的简单实现代码示例
Dec 02 #HTML / CSS
html5跳转小程序wx-open-launch-weapp踩坑
Dec 02 #HTML / CSS
Bootstrap File Input文件上传组件
Dec 01 #HTML / CSS
HTML5单选框、复选框、下拉菜单、文本域的实现代码
Dec 01 #HTML / CSS
Html5页面点击遮罩层背景关闭遮罩层
Nov 30 #HTML / CSS
You might like
PHPShop存在多个安全漏洞
2006/10/09 PHP
PHP下常用正则表达式整理
2010/10/26 PHP
php实现图片添加水印功能
2014/02/13 PHP
ThinkPHP访问不存在的模块跳转到404页面的方法
2014/06/19 PHP
[原创]ThinkPHP中SHOW_RUN_TIME不能正常显示运行时间的解决方法
2015/10/10 PHP
PHP针对字符串开头和结尾的判断方法
2016/07/11 PHP
PHP简单获取网站百度搜索和搜狗搜索收录量的方法
2016/08/23 PHP
PHP环境搭建(php+Apache+mysql)
2016/11/14 PHP
Laravel框架搜索分页功能示例
2019/02/01 PHP
JSQL SQLProxy 的 php 版本代码
2010/05/05 Javascript
javascript定义函数的方法
2010/12/06 Javascript
javascript中Object使用详解
2015/01/26 Javascript
超级给力的JavaScript的React框架入门教程
2015/07/02 Javascript
JavaScript中数组继承的简单示例
2015/07/29 Javascript
javascript实现列表滚动的方法
2015/07/30 Javascript
javascript省市级联功能实现方法实例详解
2015/10/20 Javascript
微信小程序的动画效果详解
2017/01/18 Javascript
vue+axios 前端实现登录拦截的两种方式(路由拦截、http拦截)
2018/10/24 Javascript
浅谈Vue为什么不能检测数组变动
2019/10/14 Javascript
django主动抛出403异常的方法详解
2019/01/04 Python
如何爬取通过ajax加载数据的网站
2019/08/15 Python
如何基于Python批量下载音乐
2019/11/11 Python
pytorch 图像中的数据预处理和批标准化实例
2020/01/15 Python
Python3.9又更新了:dict内置新功能
2020/02/28 Python
python list等分并从等分的子集中随机选取一个数
2020/11/16 Python
浅谈CSS3 动画卡顿解决方案
2019/01/02 HTML / CSS
美国钻石商店:Zales
2016/11/20 全球购物
德国高性价比网上药店:medpex
2017/07/09 全球购物
Hotels.com越南:酒店预订
2019/10/29 全球购物
计算机应用专业学生的自我评价分享
2013/11/03 职场文书
市场总经理岗位职责
2014/04/11 职场文书
2014年党支部学习材料
2014/05/19 职场文书
2015年五一劳动节演讲稿
2015/03/18 职场文书
2019XX公司员工考核管理制度!
2019/08/07 职场文书
Python echarts实现数据可视化实例详解
2022/03/03 Python
Ruby GDBM操作简介及数据存储原理
2022/04/19 Ruby