HTML5 body设置全屏背景图片 如何让body的背景图片自适应整个屏—-实战经验[通俗易懂]

HTML5 body设置全屏背景图片 如何让body的背景图片自适应整个屏—-实战经验[通俗易懂]用什么代码实现?不允许有白色底色产生,因为手机高度不一样错误的写法:加到div中结合图片设置min-height,但是页面不会回弹话不多说直接上代码终极方案html,body{width:100%;height:100%}再加一段body{font-family:"华文细黑";background:url(&quo

大家好,又见面了,我是你们的朋友全栈君。

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

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

错误的写法:加到div中结合图片设置min-height,但是页面不会回弹

终极方案

html,body{ 
   
	width:100%;
	height:100%
}
body{ 
   
  font-family: "华文细黑";
  background:url("../img/Flyer-bg.png") no-repeat;
  background-size: 100%;
}

其他方案

<!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>

最简单最高效的居中方式

display:flex与margin:auto的强行组合

<div class="center-layout">
  <div></div>
</div>
.center-layout { 
   
  display: flex;
  width: 400px;
  height: 400px;
  background-color: #f66; div { 
   
      margin: auto;
      width: 100px;
      height: 100px;
      background-color: #66f;
  }
}
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/130355.html原文链接:https://javaforall.net

(0)
上一篇 2022年6月14日 下午1:36
下一篇 2022年6月14日 下午1:46


相关推荐

  • typescript中文手册,你想知道的这儿全都有~

    typescript中文手册,你想知道的这儿全都有~基础类型介绍为了让程序有价值 我们需要能够处理最简单的数据单元 数字 字符串 结构体 布尔值等 TypeScript 支持与 JavaScript 几乎相同的数据类型 此外还提供了实用的枚举类型方便我们使用 布尔值最基本的数据类型就是简单的 true false 值 在 JavaScript 和 TypeScript 里叫做 boolean 其它语言中也一样 varisDone boolean false 1 数字和 JavaScript 一样 TypeScript 里的所有数字都是浮点数 这些浮点数的类

    2026年3月17日
    1
  • OpenClaw刷屏!“养龙虾”成网络新梗,但有的“养虾人”已经开始后悔……

    OpenClaw刷屏!“养龙虾”成网络新梗,但有的“养虾人”已经开始后悔……

    2026年3月13日
    2
  • 身后的脚印

    身后的脚印

    2021年8月22日
    59
  • Ubuntu 15.10 安装 Rabbitvcs

    Ubuntu 15.10 安装 Rabbitvcsppa按回车继续或者Ctrl+c取消添加gpg:钥匙环‘/tmp/tmp_70d0zm5/secring.gpg’已建立gpg:钥匙环‘/tmp/tmp_70d0zm5/pubring.gpg’已建立gpg:下载密钥‘34EF4A35’,从hkp服务器keyserver.ubuntu.comgpg:/tmp/tmp_70d0zm5/trustdb.gpg:建立了信任度数据库gpg:密钥34EF4A35:公钥“LaunchpadRabbitVCS”已导入gpg:合计被处理的数量:1g

    2022年7月18日
    15
  • 基于蓝墨云平台的计算机教学,基于蓝墨云班课的中职计算机“分层教学”模式探究…

    基于蓝墨云平台的计算机教学,基于蓝墨云班课的中职计算机“分层教学”模式探究…崔月娇一 教学现状概述一方面 我校是面向全国招生 部分欠发达地区的学生由于资源配置导致计算机基础相当薄弱 而来自发达地区的学生早早地接触了计算机 部分计算机基础操作已相当熟练 学生的计算机水平参差不齐 这样大大增加了教师教学的难度 另一方面 随着科技的不断进步 移动互联网的不断发展 越来越多的学生开始将手机带入课堂 十九大报告指出 发展素质教育 推进教学公平 要建设 人人皆学 时时可学 处处能

    2026年3月19日
    2
  • Webpack插件按需加载组件_webpack懒加载

    Webpack插件按需加载组件_webpack懒加载因为Vue是SPA,所以首页第一次加载时会把所有的组件以及组件相关的资源全都加载了。这样就会导致首页加载时加载了许多首页用不上的资源,造成网站首页打开速度变慢,降低用户体验。为了解决上面问题,我们需要对Vue实现组件懒加载。本文将对懒加载的实现原理以及使用进行讲解。

    2022年10月6日
    6

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号