HTML初识11

需求1:添加背景色

 1、 background-color: ;

        添加背景色

        background-color: red;

 需求2:添加背景图片

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

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

           2、background-image:url();

            url() 指向图片引入的路径

            如果引入的图片小于盒子，图片默认会铺满

            如果引入的图片大于盒子，图片默认显示的是左上角的位置

           

        需求3:虽然图小，但图片我只要一张

        3、background-repeat:;设置背景图是否铺满

          可选值

            repeat  铺满

            no-repeat  不铺满，留一张

            repeat-x  水平方向铺满

            repeat-y   垂直方向铺满

        

        background-repeat:no-repeat;

         需求4:调整背景图片在元素中的位置 

        4、background-position: ; 调整背景图位置

            参数：（参数之间用空格隔开）

                参数1  水平方向位置

                参数2  垂直方向位置

             写法1：通过这几个方位词来调整图片的位置

              left  right  top  bottom  center

             写法2:直接写大小 例如：200px 100px

             注意：

                参数2如果不写的话，默认是center

             

5:background-clip 设置背景色的范围

      可选值：

          border-box 默认值，背景颜色会出现在边框的下边

          padding-box  背景不会出现在边框，只会出现在内容区和内边距

          content-box  背景只出现在内容区

6:background-origin

    设置背景图片的偏移量计算的原点,配合偏移量使用的

      padding-box  从内部距处开始计算   默认值

      content-box  背景图片的偏移量从内容区处计算

      border-box   从边框开始计算偏移量

7:background-size 设置背景图片的大小

  参数：

    第一个值：宽度

    第二个值：高度

        如果只写一个，第二值，默认为auto

       

    cover  图片的比例不变，将元素铺满 (比较常用)

    contain 图片比例不变，将图片完整显示

background

            - 通过该属性可以同时设置所有背景相关的样式,

                  样式值之间用空格隔开即可

            - 没有顺序的要求，谁在前谁在后都行

              也没有数量的要求，不写的样式就使用默认值

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