背景设置方法

<style>

        p {

            width: 100px;

            height: 100px;

            /* 设置背景颜色 */

            background-color: red;

            /* 设置背景图片 */

            background-image: url(./img/小图.webp);

        }

        div.first {

            width: 600px;

            height: 600px;

            background-color: pink;

            /* 设置背景图 */

            background-image: url(./img/小图.webp);

            /* 设置是否平铺 */

            background-repeat: no-repeat;

            /* background-repeat-x: repeat; */

            /* 设置图片在元素中的位置 */

            background-position: 10px;

            background-position: right center;

            background-position: 50%;

            display: inline-block;

           

        }

        .second {

            display: inline-block;

            width: 150px;

            height: 150px;

            background-image: url(./img/小图.webp);

            background-size: 100% 100%;

        }

        .third {

            display: inline-block;

            width: 800px;

            height: 1000px;

            background-image: url(./img/中等图jpg.jpg);

           background-repeat: no-repeat;

           background-color: pink;

           background-size: cover;

           background-size: contain;

        }

        body {

            background-image: url(./img/gaitubao_大图_png.png);

            background-repeat: no-repeat;

            background-attachment: scroll;

        }

        .item {

            height:800px

        }

    </style>

        1.设置背景颜色 background-color

            取值：英文、rgba、rgb、#000000、hsl(a)

        2.背景图片

          使用场景：

          ① 常见的logo

          ② 装饰性的小图标

          ③ 超大图片

         使用背景图的优点：可以更好的设置位置

          2.1 background-image 设置背景图片

          2.2 当背景图片大小<元素大小=》默认重复图片，将元素铺满

             background-repeat：设置是否平铺

                取值：no-repeat 设置不平铺

                      repeat 设置平铺（默认）

             包括：background-repeat-x(水平方向)和background-repeat-y(垂直方向)

          2.3 设置背景图片在元素中的位置

              background-position

                取值：

                  一个值：代表图片离元素左边的距离，垂直方向默认居中

                  二个值：第一个值代表图片离元素左边的距离，第二个值代表图片离元素顶部的距离

                  取值的类型：具体数值，方位词：left、right、top、bottom、center

                            百分比：元素本身的宽高

          2.4 设置背景图片的大小

             background-size:

                取值：具体数值 百分比（元素本身的宽高）

                cover：初始比例进行缩放，是最小一边铺满元素，有可能会出现图片显示不完全

                contain：初始比例进行缩放，只要有一边完成铺满就可以，有可能会出现部分元素区域没有铺满

          2.5 设置背景图片是否固定

              background-attachment

              取值：fixed 固定

                   scroll 随着滚动条进行滚动

      -->

    <p>护衣后罪不，能而绪。</p>

    <div class="first"></div>

    <div class="second"></div>

    <div class="third"></div>

    <p class="item"></p>