HTML背景

1: background-color设置背景色

2、 设置背景图片

语法：background-image:url(./img) ;

_可以同时设置背景色，火绒背景图片，如果同时设置，背景色是在背景图下面

--图片在元素中的位置

如果背景图片大于元素，默认是显示图片的左上角

如果一样大，则正常全部显示

                  如果图片小于元素，则默认情况下，背景图片会平铺充满元素

 background-image:url() ;

3、  background-repeat: no-repeat;设置背景图片重复的方式

            可选值：

              repeat  默认值  双方向重复

              no-repeat  不重复，有多大就显示多大

              repeat-x  水平方向重复

              repea-y  垂直方向重复

 background-repeat: no-repeat;

background-position: ;设置图片在元素中的位置

                   默认在元素的左上角

                   可选值：

                    1、  top  right  left   bottom  center中两个值

                      如果只写一个值，第二个值默认是center

                    2、也可以直接指定两个偏移量

                         第一个值，是水平的偏移量   可正(向右)  可负(向左)

                         第二个值，是垂直的偏移量   可正(向下)  可负(向上)

background-position: center;

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: cover;

background简写方式

        -这个属性可同时设置背景相关的所有样式

          没有顺序要求，如果不写，就会使用默认值

        -background-size 必须要写在background-position后面