仔仔的家

對於一個網頁，我們開始設計的時候，可能沒有過多的去想背景圖到底是什麼，因為大多都是設計背景色就可以了，原因嗎，我想也很簡單，因為它與前景音樂一樣，對於網頁的打開，速度會有一定的影響。不過對於一般的個人網站，或者個人博客而言，它對展現自己的個性，當然是不可或缺的了，當然什麼都不會太過完美，有好就有壞，也就是當圖像不可用但CSS可用的時候，替換內容就不會顯示出來，因此，並不建議在導航按鈕文本或類似的情況中使用CSS背景圖片。控制背景圖片的CSS屬性有很多，只要與圖片的相關的，大多都會用的上。

(1) 背景圖片的導入：

當然大家最熟悉的當然是background與background-image了。
為網頁設計背景圖片的代碼是：
body {background:url("d:\images\04.jpg")} 
或者body {background-image:url("d:\images\04.jpg")} 
這樣的話，我們就能將想要作背景的圖片導進網頁裡了。

(2) 背景圖片的顯示方式：

當然，只用上面的代碼，是無法表達出自己想要的效果的。因為，圖片小了，就會以平舖的方式，如果是大了，為顯示它，就是會出現滾動條，這樣多不好。因此，我們還得多其進行顯示控制，也就是要用到background-repeat，
它是取值：
repeat :默認值。背景圖像在縱向和橫向上平鋪
no-repeat :背景圖像不平鋪
repeat-x :背景圖像僅在橫向上平鋪
repeat-y :背景圖像僅在縱向上平鋪
而代碼，我想只要懂一點CSS的都知道，如下：
body {background:url("d:\images\04.jpg");background-repeat:no-repeat} 
這樣的話，它就是以原圖像大小顯示了。

(3) 背景圖片的大小控制：

不過問題是，倘若圖片過大了，又怎麼辦呢？對於一個好網頁來說，最好不要用太大的圖片，原因上面也說過了，影響打開網頁的速度。我們最好還是用PS或者FireWorks處理一下。不過既然我提到了，我們也不防用CSS來實現圖片大小的控制。我想很多人會自然而然的用上如下代碼：
<style type="text/css"> 
body{background-image:url("d:\images\04.jpg");width:350px;height:350px; } 
</style> 

background-clip：背景剪輯
background-origin：背景起源
background-size：背景尺寸
background-break：背景的突破

雖然是有了這些屬性，不過現在還沒有支持它們的瀏覽器。真是好苦惱啊。 

(4)背景圖片的位置控制：    

背景圖片，我科是導進來了，但是它的位置真有一點無法讓人接受。因為它默認的是左上對齊。但是我們卻不想這樣子放置，那我們又該怎麼辦呢。不要著急，激動人心的時刻馬上到來，現在，讓我們來認識一下background-position、background-position-x及background-position-y吧。    

a.基本語法: background-position : length || length background-position : position || position background-position-x : length | left | center | right background-position-y : length | top | center | bottom
b.語法取值: 
length :百分數|由浮點數字和單位標識符組成的長度值。
position : top | center | bottom | left | center | right

c.示例：

1. body { background-image: url("d:\images\04.jpg"); background-position: 50% 50%; background-repeat:no-repeat; } /*設置雙向坐標，這時相當於完全居中*/ 

2. body { background-image: url("d:\images\04.jpg"); background-position-x: 50%; background-repeat:no-repeat; } /*設置雙向坐標，這時相當於水平居中*/ 

3. body { background-image: url("d:\images\04.jpg"); background-position-y: 50%; background-repeat:no-repeat; } /*設置縱向坐標，這時相當於垂直居中*/ 

length | top | center | bottom我只寫下面三個例子。

1. body { background-image: url("d:\images\04.jpg"); background-position: top right; background-repeat:no-repeat; } /*設置雙向坐標，這時相當於右上*/ 

2. body { background-image: url("d:\images\04.jpg"); background-position: 50% center; background-repeat:no-repeat; } /*設置雙向坐標，這時相當於中下*/ 

3. body { background-image: url("d:\images\04.jpg"); background-position: 60px center; background-repeat:no-repeat; } /*設置雙向坐標，這時相當於距左60像素下*/ 

說了這麼多例子，我想你對於定位，有一定的了解了吧。