CSS3背景圖片（多重背景、起始位置、裁剪、尺寸）

一、多重背景圖片

①CSS3允許我們在一個元素上添加多個圖片

②多重背景可以把多個圖片資源添加到background屬性上，用逗號隔開，然后用background-position把他們定位到你想要的位置

<div class="box"></div>

  .box{
　　width: 600px;
　　height: 200px;
　　border: 1px solid #000;
　　background: url('1.jpg') no-repeat,url('2.jpg') no-repeat 200px 0,url(‘3.jpg’) no-repeat 400px 0;
}
  

二、圖片起始位置background-origin

①background-origin允許我們定義圖片從哪兒開始定位，可選的屬性值padding-box（默認）、border-box、content-box

②padding-box默認圖片從內邊距開始 

<div class="box"></div>

        .box{
            width: 600px;
            height: 200px;
            border: 50px solid #ccc;
            background: url('1.jpg') no-repeat;
            background-origin: padding-box;
        }
   

③border-box定義圖片從邊框開始

<div class="box"></div>

        .box{
            width: 600px;
            height: 200px;
            border: 50px solid rgba(0, 0, 255, 0.5);
            background: url('1.jpg') no-repeat;
            background-origin: border-box;
        }
 

④content-box定義從元素的內容部分為起始位置 

<div class="box"></div>

        .box{
            width: 600px;
            height: 200px;
            border: 50px solid #ccc;
            background: url('1.jpg') no-repeat;
            background-origin: content-box;
            padding: 50px;
        }
   

三、圖片裁剪background-clip

①即使背景圖的起始位置設置為內容區 ，但這不代表圖片就被限制在內容區 ，在整個元素邊框及邊框以內都是可以繪制的 （去掉了no-repeat）

<div class="box"></div>

 

        .box{
            width: 600px;
            height: 200px;
            border: 50px solid rgba(0, 0, 255, 0.6);
            background: url('1.jpg');
            background-origin: content-box;
            padding: 50px;
        }
 

②使用background-clip屬性 ，可以裁剪圖片，設置圖片顯示范圍，與content-origin的屬性值類似 ，有padding-box（默認）、border-box、content-box

<div class="box"></div>

        .box{
            width: 600px;
            height: 200px;
            border: 50px solid rgba(0, 0, 255, 0.6);
            background: url('1.jpg');
            background-origin: content-box;
            padding: 50px;
            background-clip: content-box;
        }
  

四、圖片尺寸background-size

①兩個像素值控制寬高

        .box{
            width: 600px;
            height: 200px;
            border: 1px solid #ccc;
            background: url('1.jpg') no-repeat;
            background-size: 100px 300px
        }
  

②寫一個像素值就代表寬和高像素相同 

        .box{
            width: 600px;
            height: 200px;
            border: 1px solid #ccc;
            background: url('1.jpg') no-repeat;
            background-size: 100px
        }
 

③cover是覆蓋整個區域，在這個例子中寬度會占滿

        .box{
            width: 600px;
            height: 200px;
            border: 1px solid #ccc;
            background: url('1.jpg') no-repeat;
            background-size: cover;
        }

④contain是保證圖片在區域內最大顯示，在這個例子中高度會占滿

        .box{
            width: 600px;
            height: 200px;
            border: 1px solid #ccc;
            background: url('1.jpg') no-repeat;
            background-size: contain;
        }