CSS学习笔记-背景属性

一、背景尺寸属性：
    1、含义：
        背景尺寸属性是CSS3中新增的一个属性，专门用于设置背景图片大小

    2、格式：
        1.1具体像素：
             background-size:300px 200px; 
            第一个参数：宽度
            第二个参数：高度

        1.2百分比:
             background-size:80% 50%; 
            第一个参数：宽度
            第二个参数：高度

        1.3宽度等比拉伸:
             background-size:80% auto; 
            第一个参数：宽度
            第二个参数：高度

        1.4高度等比拉伸:
             background-size:auto 70%; 
            第一个参数：宽度
            第二个参数：高度

        1.5    cover:
            background-size:cover; 
            等比放大，直至宽且高填满元素

        1.6    contain:
             background-size:contain; 
            等比放大，直至宽或高填满元素

二、背景图片定位区域属性：
    1、含义：
        告诉系统背景图片从什么区域开始显示，默认是从padding区域开始

    2、格式：    
        2.1从内边距开始显示（默认）：
             background-origin:padding-box; 

        2.2从边框开始显示：
             background-origin:border-box; 

        2.3从内容(content)区域开始显示：
             background-origin:content-box; 

三、背景绘制区域属性：
    1、含义：
        背景绘制区域属性是专门用于指定从哪个区域开始绘制背景的，默认从border区域开始绘制背景

    2、格式：    
        2.1从padding(默认)区域开始绘制：
             background-clip:paddingbox; 

        2.2从border区域开始绘制：
             background-clip:border-box; 

        2.3从content(内容)区域开始绘制：
             background-clip:content-box; 

四、多重背景图片
    1、含义：
        实现多重背景
    2、格式：
        （1）方法1:：
             background:url("images/bg1.jpg") no-repeat left top,url("images/bg2.jpg") no-repeat right top,...; 
        （2）方法2：
             background-image:url("images/bg1.jpg"),url("images/bg2.jpg"),...; 
             background-repeat:no-repeat,no-repeat,...; 
             background-position:left top,right top,...; 

    3、注意点：
        3.1多张背景图片之间用逗号隔开即可
        3.2先添加的背景图片会覆盖后添加的背景图片
        3.3建议编写多重背景的时候采用第二种方法



本节专有词语：
    cover：        覆盖
    contain：     包含、控制
    origin：        起源、原点
    clip：           剪
    repeat：      重复