background 背景相关属性

背景常见属性

            background-color

            background-image

            background-repeat

            background-size:

            background-position

            background-origin

            background-clip

     .box{
            width: 400px;
            height: 400px;
            /* 1:设置背景色 */
            background-color: red;
            border: 10px black double;
            /* 2:设置背景图片 
                 语法：  background-image: url(./img/小图.webp);
                 ——可以同时设置背景色，和背景图片，如果同时设置，背景色是在背景图片下面
                 ——图片在元素中位置
                   如果背景图片大于元素，默认是显示图片左上角
                   如果一样大，则正常全部显示
                   如果图片小于元素，则默认情况下，背景图片会平铺充满元素
                 */
            background-image: url(./img/小图.webp);
            /*3: background-repeat: ; 设置背景图片重复的方式
                可选值：
                repeat  默认值  双方向重复
                no-repeat  不重复，有多大就显示多大
                repeat-x  水平方向重复
                repeat-y  垂直方向重复
            */
            background-repeat: no-repeat;
            /* 4: background-position: ; 设置图片在元素中的位置，
                         默认是在元素的左上角 
                  可选值：
                    1、 top right  left  bottom  center中两个值
                     如果只写一个值，第二个值默认是center
                    2、也可以直接指定两个偏移量
                       第一个值，是水平的偏移量  可正（向右） 可负（向左）
                       第二个值，是垂直的偏移量   可正（向下） 可负（向上）

            */
            background-position:200px 100px;
        }

    .box{
            width: 400px;
            height: 400px;
            padding: 40px;
            background-color: red;
            background-image: url(./img/大图2.webp);
            background-repeat: no-repeat;
            /* background-position:100px 100px; */
            border: 10px black double;
            /* 5 background-clip: ; 设置背景的范围
                 可选值：
                   border-box  默认值，背景色会出现在边框下面
                   padding-box  背景就不会出现在边框下，出现在内容区和内边距区
                   content-box  背景图出现在内容区下面
             */
            background-clip:content-box ;
            /* 6:background-origin: ;  设置背景图片偏移量原点，
                    一般情况下，配合background-position使用
                可选值
                   border-box  从边框开始计算偏移量
                   padding-box 默认值  从内边距开始计算
                   content-box 从内容区开始计算偏移量 */
            background-origin:content-box  ;
            /* 7:background-size: ; 设置背景图片的大小
                1: 参数
                 第一个值：宽度
                 第二个值：高度
                   如果只写一个，第二个值，为auto
                2:cover  图片的比例不变，将元素铺满
                  contain  图片比例不变，将元素完整显示

                  */
            background-size:contain;

        }