03-CSS 背景属性

一、背景属性基础

0、使用背景属性时，需要先设置一个空间 留存使用，设置宽高

1、背景的颜色：  background-color;

    设置颜色透明度    rgba (255, 255, 255l, [0 ~ 1] )

2、背景的图像：  background-image:

        URL            图像的URL

3、背景图像是否及如何重复：    background-repeat:

    repeat        默认，背景图像将向垂直和水平方向重复
    repeat-x    只有水平位置会重复背景图像
    repeat-y    只有垂直位置会重复背景图像
    no-repeat    background-image不会重复
    inherit        从父元素继承 background-repeat 属性

4、背景图像的起始位置：    background-position:

    background-position:0px 0px;
    第一个值代表水平方向,正值代表向右移动
    第二个值代表垂直方向,正值代表向下移动
        取值: 1)数值+单位;  (精灵图的使用)
             2)百分数  ---  表示剩余空间得百分比
             3)方向词  ---   X   left right center 
                            Y    top middle bottom
             例如:background-position:right bottom;背景图在右下角

5、背景图像是否固定或者随着页面的其余部分滚动：  background-attachment:

    scroll        默认，背景图片随着页面的滚动而滚动
    fixed        背景图片不会随着页面的滚动而滚动

6、背景图得大小:        background-size:

        取值:
            1)数值+单位
            2)百分数
            3)关键字
                cover,表示覆盖.图片等比缩放,将图片完全填充.图片会被剪裁得情况
                contain,表示填充,图片等比缩放,将一侧填充满后,停止缩放,会导致一侧出现留白

7、背景属性的简写:

    background: background-color background-image background-repeat background-attachment background-position
    [先是水平位置，再是垂直位置]背景色 和 背景图的顺序可以进行对调

8、同时设置多张背景图

                 --- 需要注意的是 多张背景图的先后顺序，先写的在最上方显示！！！
    background:
        background-image background-repeat background-position,
        background-image background-repeat background-position,
        background-image background-repeat background-position；

9、背景大小单独去设置，按照多背景设置图片的顺序去设置背景大小

        background-size: url 1(大小) , url 2(大小);

二、CSS3新增背景属性

1、Background-origin 背景原点（背景的起始点）

    属性值
        padding-box    背景图像填充框的相对位置（默认值）
        border-box    背景图像边界框的相对位置
        content-box    背景图像的相对位置的内容框

2、Background-clip 背景裁切（背景显示的区域）

    属性值
        border-box    背景被裁剪到边框盒。（默认值）
        padding-box    背景被裁剪到内边距框。
        content-box    背景被裁剪到内容框。

3、Background-size 背景图的大小

    属性值  ：  宽       高 
              10px    10px
              100%    100%
        cover
            把背景图像扩展至足够大，以使背景图像完全覆盖背景区域（宽高等比扩展）
        contain
            宽高比例不变，当背景的宽或高达到最大尺寸时停止。

4、多背景图的设置

        多背景图的设置：background：url（），url（）
        以逗号隔开，不能与背景颜色一起简写