我們許許多的裝飾都是用背景圖片來實現(xiàn)的，所以CSS控制背景圖片還是非常實用，于是我研究了一下CSS控制背景圖片透明、絕對位置等的方法，這里和大家分享一下，希望對你的學(xué)習(xí)有所幫助。

CSS控制背景圖片透明、絕對位置等的方法

網(wǎng)頁設(shè)計中處理好了圖片的應(yīng)用，對網(wǎng)頁的美觀及網(wǎng)頁的性能效果來說都是十分關(guān)鍵的。首先我們從背景圖片開始。因為我們許許多的裝飾都是用背景圖片來實現(xiàn)的。既然這樣，那么就從CSS控制背景圖片講起吧。

CSS控制背景圖片：

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

(1)、CSS控制背景圖片的導(dǎo)入：

當(dāng)然大家最熟悉的當(dāng)然是background與background-image了。
為網(wǎng)頁設(shè)計背景圖片的代碼是： 

body{background:url("d:\images\04.jpg")}  
或者  
body{background-image:url("d:\images\04.jpg")}  

這樣的話，我們就能將想要作背景的圖片導(dǎo)進(jìn)網(wǎng)頁里了。

(2)、CSS控制背景圖片的顯示方式：

當(dāng)然，只用上面的代碼，是無法表達(dá)出自己想要的效果的。因為，圖片小了，就會以平鋪的方式，如果是大了，為顯示它，就是會出現(xiàn)滾動條，這樣多不好。因此，我們還得多其進(jìn)行顯示控制，也就是要用到background-repeat，
它是取值：

repeat:默認(rèn)值。背景圖像在縱向和橫向上平鋪

no-repeat:背景圖像不平鋪

repeat-x:背景圖像僅在橫向上平鋪

repeat-y:背景圖像僅在縱向上平鋪

而代碼，我想只要懂一點CSS的都知道，如下： 

body{background:url("d:\images\04.jpg");  
background-repeat:no-repeat}  

這樣的話，它就是以原圖像大小顯示了。#p#

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

不過問題是，倘若圖片過大了，又怎么辦呢？對于一個好網(wǎng)頁來說，最好不要用太大的圖片，原因上面也說過了，影響打開網(wǎng)頁的速度。我們最好還是用PS或者FireWorks處理一下。不過既然我提到了，我們也不防用CSS來實現(xiàn)圖片大小的控制。

我想很多人會自然而然的用上如下代碼：

<styletypestyletype="text/css"> 
body{background-image:url("d:\images\04.jpg");width:350px;height:350px;}  
</style> 
 

想法是好的，但你所用的瀏覽器支持嗎？我想IE或者FF一定會當(dāng)作沒看見吧。也許你會問，我曾經(jīng)設(shè)計論壇風(fēng)格時，是可以實現(xiàn)的?。课蚁?，如果只是上面的代碼的話，那是不可控制圖片的，因為它只是控制BODY的大小。當(dāng)然，這里也是控制不了的。如果是其它的ID標(biāo)記，我想是可以控制記標(biāo)記的范圍大小，呵呵，當(dāng)然也就不是圖像的大小了。
說實話，這個問題不僅困擾著你們，同時也困擾著我。因為它只是一個屬性的值，而不是一個真正的對像。

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

背景圖片，我科是導(dǎo)進(jìn)來了，但是它的位置真有一點無法讓人接受。因為它默認(rèn)的是左上對齊。但是我們卻不想這樣子放置，那我們又該怎么辦呢。不要著急，激動人心的時刻馬上到來，現(xiàn)在，讓我們來認(rèn)識一下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:百分?jǐn)?shù)|由浮點數(shù)字和單位標(biāo)識符組成的長度值。position:top|center|bottom|left|center|right

c.示例：

body{background-image:url("d:\images\04.jpg");  
background-position:50%50%;background-repeat:no-repeat;}  
/*設(shè)置雙向坐標(biāo)，這時相當(dāng)于完全居中*/  
body{background-image:url("d:\images\04.jpg");  
background-position-x:50%;background-repeat:no-repeat;}  
/*設(shè)置雙向坐標(biāo)，這時相當(dāng)于水平居中*/  
body{background-image:url("d:\images\04.jpg");  
background-position-y:50%;background-repeat:no-repeat;}  
/*設(shè)置縱向坐標(biāo)，這時相當(dāng)于垂直居中*/  
對于取值為length|top|center|bottom我只寫下面三個例子。  
body{background-image:url("d:\images\04.jpg");  
background-position:topright;background-repeat:no-repeat;}  
/*設(shè)置雙向坐標(biāo)，這時相當(dāng)于右上*/  
body{background-image:url("d:\images\04.jpg");  
background-position:50%center;background-repeat:no-repeat;}  
/*設(shè)置雙向坐標(biāo)，這時相當(dāng)于中下*/  
body{background-image:url("d:\images\04.jpg");  
background-position:60pxcenter;background-repeat:no-repeat;}  
/*設(shè)置雙向坐標(biāo)，這時相當(dāng)于距左60像素下*/  

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

(5)、CSS控制背景圖片的透明設(shè)置：

有的時候，我們總想著去將圖片設(shè)置成透明的。#p#

(6)、多幅背景圖片的設(shè)置：

對于多幅背景圖片的設(shè)置，我是在《超越CSS：WEB設(shè)計藝術(shù)精髓》里看到的。目前支持一個標(biāo)簽內(nèi)有多幅背景圖片的瀏覽器太小了，我知道的也只有AppleSafari。以許你會問，這怎么可能。當(dāng)你看完這個實例之后，我想你會驚訝，“天啊，CSS3之前都只能給每個元素使用一幅圖片。”如果想研究一下的話，就快快安裝一個SAFARI瀏覽器吧。對我而言，我相信，這是發(fā)展的趨勢。

代碼如下： 

body{  
background-image:  
url("d:\mypic\001.png"),  
url("d:\mypic\002.png");  
url("d:\mypic\003.png");  
url("d:\mypic\004.png");  
background-repeat:  
no-repeat,  
no-repeat,  
no-repeat,  
no-repeat,  
repeat-x,  
repeat-y,  
repeat-x,  
repeat-y,  
background-position:  
topleft,  
topright,  
bottomright,  
bottomleft,  
topleft,  
topright,  
bottomright,  
bottomleft;}  

 詳文參考：http://www.csschina.net/a/jc/css_739_2.html

【編輯推薦】

1. DIV CSS網(wǎng)站布局八個小技巧
2. CSS實現(xiàn)鼠標(biāo)懸停tip效果
3. DIV CSS建站對瀏覽器兼容性和注意事項
4. CSS2.0中page-break-after屬性用法
5. 解讀DIV CSS網(wǎng)頁布局中CSS無效十個原因