结果展示:![](https://i-blog.csdnimg.cn/direct/1cbfe715d7ac446a82e70bdea4c5cce5.png)
HTML部分思路:
通过body的background-image设计背景和div内容划分元素设计内容框进行设计
<body><!-- 这里作为背景板 -->
<div id="content"><!-- 这里作为内容板 -->
<p>123</p>
<div>
</body>
CSS编写
body部分代码解析
width: 100%;
min-height: 100vh;
vh表示视窗高度的百分比,使得至少整个背景填满网页
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
分别是不重复,覆盖整个网页(强制拉伸图片),并且固定背景版
div代码解析
background-color: gray;
margin-top: 80vh;
设置颜色和距离顶部距离(至少得看到背景图全貌吧,不然就白做了)
min-height: 80vh;
width: 80%;
margin-left: auto;
margin-right: auto;
接下来时设置内容板最小高度,和居中(对!就是用margin,已知最简办法)
完整代码:
<head>
<title>Document</title>
<style>
body{
width: 100%;
min-height: 100vh;
background-image: url("../image/backgroundTest.png");
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
#content{
background-color: gray;
/* margin-top: 80vh;
margin-bottom: 10vh; */
min-height: 80vh;
width: 80%;
/* margin-left: auto;
margin-right: auto; */
margin: 80vh auto 10vh auto;
}
</style>
</head>
<body>
<div id="content">
<p style="color: blue;">123</p>
</div>
</body>
可将4个margin元素进行合并,注意margin:上 右 下 左