23.CSS边框与背景【下】

                                          第十七章  CSS边框与背景【下】

一、设置背景

         属性                   值               说明              CSS版本

    background-color         颜色              背景的颜色            1  

    background-image         none或url         背景的图片           1/3

    background-repeat        样式名称          背景图片的样式       1/3

    background-size          长度值或其他      背景图像的尺寸        3

    background-position      位置坐标          背景图片的位置        1

    background-attachment    滚动方式          背景图片的滚动       1/3

    background-clip          裁剪方式          背景图片的裁剪        3

    background-origin        位置坐标          背景图片起始点        3

    background               复合值            背景图片简写方式      1

 

   1、background-color：

             值            说明                      CSS版本

        （1）颜色 ：设置背景颜色为指定颜色            1

        （2）transparent (使用频率低)：设置背景颜色为透明色       1

   2、background-image：

        （1）none ：取消背景图片的设置                1

        （2）url  : 通过URL设置背景图片               1

       例、body{

              background-image：url（图片位置）；

           }

   3、background-repeat：

        （1）repeat-x : 水平方向平铺图像         1

        （2）repeat-y : 垂直方向平铺图像         1

        （3）repeat   : 水平和垂直方向同时平铺   1

        （4）no-repeat: 禁止平铺图像             1

   4、background-position

        （1）top    :将背景图片定位到元素顶部    1

        （2）left   :将背景图片定位到元素左部    1

        （3）right  :将背景图片定位到元素右部    1

        （4）bottom :将背景图片定位到元素底部    1

        （5）center :将背景图片定位到元素中部    1

        （6）长度值 :使用长度值偏移图片的位置    1

        （7）百分数 :使用百分数偏移图片的位置    1

   5、background-size ：

        （1）auto   ：默认值，图片以本尺寸显示                                       3

        （2）cover  ：等比例缩放图片，使图像至少覆盖容器，但有可能超出容器           3

        （3）contain：等比例缩放图像，使其宽度，高度中较大者与容器与横向或纵向重合   3

        （4）长度值 ：CSS长度值，比如px、em                                          3

        （5）百分数 ：比如 100%                                                      3

   6、background-attachment：

        （1）scroll :默认值，背景固定在元素上，不会随着内容一起滚动                  1

        （2）fixed  :背景固定在视窗上，内容滚动时背景不动                            1

   7、background-clip：（设置背景起始点）

        （1）border-box :在元素盒子内绘制背景                                        3

        （2）padding-box:在内边距盒子内部绘制背景                                    3

        （3）content-box:在内容盒子内部绘制背景                                      3

   8、background-origin

        （1）border-box :在元素盒子内裁剪背景                                        3

        （2）padding-box:在内边距盒子内部裁剪背景   （渗进边框里的背景会被裁掉）     3

        （3）content-box:在内容盒子内部裁剪背景                                      3

   9、background

      例、div{

               width:400px;

               height:300px;

               border:10px deshed red;

        *       padding:50px;

    ******     background:  silver  url(img.png) no-repeat  top left /100% border-box centent-box;

        *                  背景颜色    背景图片   平铺方式   对齐方式  大小   渗进边框  内容区显示

          }

       解释：完整的简写顺序

            [background-color]

            [background-image]

            [background-repeat]