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