手搓博客？美化页面之背景板-CSDN博客

本文链接：https://blog.csdn.net/m0_73019347/article/details/140508504

结果展示：

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：上右下左