CSS學習筆記-背景屬性

1、背景尺寸屬性：
    一、含義：
        背景尺寸屬性是CSS3中新增的一個屬性，專門用於設置背景圖片大小

    二、格式：
        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; 
            等比放大，直至寬或高填滿元素

2、背景圖片定位區域屬性：
    一、含義：
        告訴系統背景圖片從什麼區域開始顯示，默認是從padding區域開始

    二、格式：    
        2.1從內邊距開始顯示（默認）：
             background-origin:padding-box; 

        2.2從邊框開始顯示：
             background-origin:border-box; 

        2.3從內容(content)區域開始顯示：
             background-origin:content-box; 

3、背景繪製區域屬性：
    一、含義：
        背景繪製區域屬性是專門用於指定從哪一個區域開始繪製背景的，默認從border區域開始繪製背景

    二、格式：    
        2.1從padding(默認)區域開始繪製：
             background-clip:paddingbox; 

        2.2從border區域開始繪製：
             background-clip:border-box; 

        2.3從content(內容)區域開始繪製：
             background-clip:content-box; 

4、多重背景圖片
    一、含義：
        實現多重背景
    二、格式：
        （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.1多張背景圖片之間用逗號隔開便可
        3.2先添加的背景圖片會覆蓋後添加的背景圖片
        3.3建議編寫多重背景的時候採用第二種方法



本節專有詞語：
    cover：        覆蓋
    contain：     包含、控制
    origin：        起源、原點
    clip：           剪
    repeat：      重複