淺談背景圖檔的填充

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

在設計的過程中第一步就是先排版建構架構，後利用CSS對各個塊進行定位。不過各個樣式的id和class部落格園本身已經定義好了，我們可以在設定面闆中勾選禁用模闆預設CSS”複選框。然後重新整理部落格首頁檢視源碼，将代碼copy到dw上修改樣式。最後将自己修改滿意好的css樣式貼到“管理”-“部落格設定”中“通過CSS定制頁面”的文本框中。

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

這是一個div的id樣式：

1

2

3

4

5

6

<code>#blogTitle{</code>

<code>        </code><code>background-image</code><code>:</code><code>url</code><code>(image/blog</code><code>2</code><code>.jpg) ;</code>

<code>        </code><code>height</code><code>:</code><code>400px</code><code>;</code>

<code>        </code><code>padding-left</code><code>:</code><code>5%</code><code>;</code>

<code>        </code><code>padding-top</code><code>:</code><code>20px</code><code>;</code>

<code>}</code>

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

是以加上一句 

7

8

<code>        </code><code>background-</code><code>size</code><code>:cover;</code>

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

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

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

<code>#bac</code><code>kground-size{</code>

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

<code>}                </code>

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

<code>#bac</code><code>kground-size</code><code>2</code><code>{</code>

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

<code>}                     </code>

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

<code>#bac</code><code>kground-size</code><code>3</code><code>{</code>

<code>　　   background-</code><code>size</code><code>:cover;    //背景圖完全填充頁面 隻顯示一次</code>

<code>}               </code>

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

<code>#bac</code><code>kground-size</code><code>4</code><code>{</code>

<code>　   　background-</code><code>size</code><code>:contain;      //按照原圖等比例縮小反複填充滿div </code>

<code>}                             </code>

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

<code>#bac</code><code>kground-size</code><code>5</code><code>{</code>

<code>　   　background-</code><code>size</code><code>:</code><code>auto</code><code>; //按照原圖大小反複填充滿div</code>

<code>}                               </code>

本文轉自ChokCoco部落格園部落格，原文連結：http://www.cnblogs.com/coco1s/p/3577142.html