<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 背景颜色 */
        .div {
            width: 200px;
            height: 100px;
            background-color: #03a309;
        }

        /* 背景图片 */
        .divb {
            width: 200px;
            height: 500px;
            background-image: url(地址);
            /* 属性：none（默认）、url+（图片地址） */
        }

        /* 背景平铺 */
        .divbp {
            width: 200px;
            height: 500px;
            background-image: url();
            background-repeat: no-repeat;
            /* 属性：repeat（默认）、no-repeat、repeat-x、repeat-y
            repeat-x、repeat-y————沿x轴还是y轴平铺 */
            /* 默认情况下背景是平铺的
            平铺：图片重复填满区域 */

            background-color: #03a309;
            /* 页面元素既可以添加背景图片，又可以添加背景颜色，
            只不过背景图片会压住颜色 */
        }

        /* 背景方位(重要) */
        .divpo {
            width: 1200px;
            height: 500px;
            background-color: #03a309;
            background-image: url(/背景.png);
            background-repeat: no-repeat;
            /* 用于控制背景图片的位置
            background-position: x y; 
            x、y为方位名词*/
            /* background-position: top left; */
            /* 背景图片左上对齐 */
            /* x、y的顺序不影响结果 */

            /* background-position: center center; */
            background-position: center;
            /* 如果第一个填了，第二个默认为center */
            /* 属性值：top、center、bottom（底部）y轴
            left center right y轴 */

            /* 精确单位 */
            background-position: 20px 50px;
            /* x轴20，y轴50 */
            /* x在前，y在后，是坐标，原点在左上角 */

            /* 混合单位 */
            background-position: 20px center;
            /* 水平20，上下居中 */
            /* x在前，y在后，是坐标，原点在左上角 */
        }

        .divfrim {
            width: 1200px;
            height: 500px;
            background-color: #03a309;
            background-image: url(/背景.png);
            /* 背景固定 */
            background-attachment: fixed;
            /* 属性：scroll（随着滚动）、fix（固定） */
            font: italic 700 70px 'Microsoft YaHei';
        }

        .divfh {
            /* 复合写法 */
            /* background-color: #03a309;
            background-image: url(地址);
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-position: 20px 50px; */
            /* 一般约定顺序为：颜色、图片、平铺、滚动、位置 */
            background: #000 url(地址) no-repeatfixed 20px 50px;
        }

        .divtm {
            width: 300px;
            height: 200px;
            /* 背景半透明 */
            /* background: rgba(red, green, blue, alpha);
            alpha为透明度，0~1之间 */
            background: rgba(176, 20, 20, 0.6);
        }
    </style>
</head>

<body class="">
    <div class="divtm"></div>
    <p>背景固定</p>
    <p>背景固定</p>
    <p>背景固定</p>
    <p>背景固定</p>
    <p>背景固定</p>
    <p>背景固定</p>
    <p>背景固定</p>
    <p>背景固定</p>
</body>

</html>

下载链接：

背景.html