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截取字符串实例代码【推荐】
Jun 07 HTML / CSS
CSS3制作炫酷的下拉菜单及弹起式选单的实例分享
May 17 HTML / CSS
CSS3实现3D翻书效果
Jun 20 HTML / CSS
基于HTML5的WebSocket的实例代码
Aug 15 HTML / CSS
Application Cache未缓存文件无法访问无法加载问题
May 31 HTML / CSS
Html5+JS实现手机摇一摇功能
Apr 24 HTML / CSS
多视角3D逼真HTML5水波动画
Mar 03 HTML / CSS
HTML5进阶段内联标签汇总(小篇)
Jul 13 HTML / CSS
HTML5 LocalStorage 本地存储详细概括(多图)
Aug 18 HTML / CSS
详解H5 活动页之移动端 REM 布局适配方法
Dec 07 HTML / CSS
html5手机端页面可以向右滑动导致样式受影响的问题
Jun 20 HTML / CSS
HTML5 Blob对象的具体使用
May 22 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
多重?l件?合查?(二)
2006/10/09 PHP
VIM中设置php自动缩进为4个空格的方法详解
2013/06/14 PHP
PHP清除数组中所有字符串两端空格的方法
2014/10/20 PHP
php安全配置记录和常见错误梳理(总结)
2017/03/28 PHP
浅谈PHP进程管理
2019/03/08 PHP
jQuery 学习入门篇附实例代码
2010/03/16 Javascript
事件绑定之小测试  onclick &amp;&amp; addEventListener
2011/07/31 Javascript
『jQuery』取指定url格式及分割函数应用
2013/04/22 Javascript
从数组中随机取x条不重复数据的JS代码
2013/12/24 Javascript
在css加载完毕后自动判断页面是否加入css或js文件
2014/09/10 Javascript
JavaScript中用于生成随机数的Math.random()方法
2015/06/15 Javascript
angularJs关于指令的一些冷门属性详解
2016/10/24 Javascript
jQuery中select与datalist制作下拉菜单时的区别浅析
2016/12/30 Javascript
JS获得一个对象的所有属性和方法实例
2017/02/21 Javascript
JS库之Particles.js中文开发手册及参数详解
2017/09/13 Javascript
electron制作仿制qq聊天界面的示例代码
2018/11/26 Javascript
微信小程序按钮点击跳转页面详解
2019/05/06 Javascript
解决layer.open后laydate失效的问题
2019/09/06 Javascript
微信小程序进入广告实现代码实例
2019/09/19 Javascript
vue+Element-ui前端实现分页效果
2020/11/15 Javascript
Flask框架URL管理操作示例【基于@app.route】
2018/07/23 Python
python输入整条数据分割存入数组的方法
2018/11/13 Python
Python实现合并两个有序链表的方法示例
2019/01/31 Python
详解Python数据分析--Pandas知识点
2019/03/23 Python
python调试神器PySnooper的使用
2019/07/03 Python
python绘制已知点的坐标的直线实例
2019/07/04 Python
让你的Python代码实现类型提示功能
2019/11/19 Python
DjangoWeb使用Datatable进行后端分页的实现
2020/05/18 Python
Python+Opencv身份证号码区域提取及识别实现
2020/08/25 Python
解锁canvas导出图片跨域的N种姿势小结
2019/01/24 HTML / CSS
 Alo Yoga官网:购买瑜伽服装
2018/06/17 全球购物
Travelstart沙特阿拉伯:廉价航班、豪华酒店和实惠的汽车租赁优惠
2019/04/06 全球购物
Bonprix法国:时尚、鞋子、家居
2020/12/29 全球购物
放飞理想演讲稿
2014/09/09 职场文书
2014年社区计生工作总结
2014/11/18 职场文书
苹果M1芯片安装nginx 并且部署vue项目步骤详解
2021/11/20 Servers