淺談背景圖片的填充

因為今天剛剛開了blog，作為一個前端designer，就想自己設計自己的Blog樣式，看着也舒心。

在設計的過程中第一步就是先排版構建框架，后利用CSS對各個塊進行定位。不過各個樣式的id和class博客園本身已經定義好了，我們可以在設置面板中勾選禁用模板默認CSS”復選框。然后刷新博客首頁查看源碼，將代碼copy到dw上修改樣式。最后將自己修改滿意好的css樣式貼到“管理”-“博客設置”中“通過CSS定制頁面”的文本框中。

言歸正傳，在設計的過程中需要填充背景圖片，因為不同瀏覽器或窗口大小，圖片可能只顯示一部分或者重復填充多次，但是我們只需要一副完整的圖片呈現。

這是一個div的id樣式：

#blogTitle{
        background-image:url(image/blog2.jpg) ;
        height:400px;
        padding-left:5%;
        padding-top:20px; 
}

如果div的尺寸與背景圖片的尺寸不一樣或者DIV不是固定大小，那么圖片肯定是無法完全顯示。

所以加上一句 

#blogTitle{
        background-image:url(image/blog2.jpg) ;
        height:400px;
        padding-left:5%;
        padding-top:20px; 
        background-size:cover;

}

現在圖片可以自動填充瀏覽器顯示頁面的大小。不過經過測試，至少在IE8上仍舊無法正常顯示，然后繼續測試發現這個屬性在firefox，chrome，360，以及ie9上都可以使用。

下面是我繼續查找資料測試得到的

       

1.若想要背景圖片以一定大小呈現

#background-size{

　   　background-size:200px 100px;    //背景圖將以200px*100px像素大小呈現，會多次填充
}                

2.若想要背景圖片以一百分比呈現

#background-size2{

　   　background-size:30% 60%;   //背景圖將以原圖大小的30%*60%像素大小呈現，會多次填充  
}                     

3.想要完全呈現且只呈現一次

#background-size3{
　　   background-size:cover;    //背景圖完全填充頁面 只顯示一次
}               

4.想要縮小比例反復填充

#background-size4{
　   　background-size:contain;      //按照原圖等比例縮小反復填充滿div  
}                             

5.按照原圖大小反復填充

#background-size5{
　   　background-size:auto; //按照原圖大小反復填充滿div
}