css背景屬性background詳解

《css背景屬性background詳解》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在行業(yè)資料-天天文庫(kù)。

1、CSS背景屬性Background詳解本文詳解了CSS的背景屬性Background，包括CSS3中新增的背景屬性。如果你是個(gè)CSS初學(xué)者，還可以查看之前介紹的CSS浮動(dòng)屬性和CSS透明屬性詳解。css2中的背景（background）CSS2中有5個(gè)主要的背景（background）屬性，它們是：background-color：?指定填充背景的顏色。background-image：?引用圖片作為背景。background-position：?指定元素背景圖片的位置。background-repeat：?決定是否重復(fù)背景圖片。background-attachm

2、ent：?決定背景圖是否隨頁(yè)面滾動(dòng)。??這些屬性可以全部合并為一個(gè)縮寫(xiě)屬性：background。需要注意的一個(gè)要點(diǎn)是背景占據(jù)元素的所有內(nèi)容區(qū)域，包括padding和border，但是不包括元素的margin。它在Firefox，Safari，Opera以及IE8中工作正常，但是IE6和IE7中，background沒(méi)把border計(jì)算在內(nèi)。?基本屬性背景色（background-color）?代碼background-color?屬性用純色來(lái)填充背景。有許多方式指定這個(gè)顏色，以下方式都得到相同的結(jié)果。background-color：?blue;backgroun

3、d-color：?rgb（0，?0，?255）;background-color：?#0000ff;background-color?也可被設(shè)置為透明（transparent），這會(huì)使得其下的元素可見(jiàn)。??背景圖（background-image）background-image屬性允許指定一個(gè)圖片展示在背景中?？梢院蚥ackground-color連用，因此如果圖片不重復(fù)地話，圖片覆蓋不到地地方都會(huì)被背景色填充。代碼很簡(jiǎn)單，只需要記住，路徑是相對(duì)于樣式表的，因此以下的代碼中，圖片和樣式表是在同一個(gè)目錄中的。background-image：?url（image.j

4、pg）;??但是如果圖片在一個(gè)名為images的子目錄中，就應(yīng)該是：background-image：?url（images/image.jpg）;??背景平鋪（background-repeat）設(shè)置背景圖片時(shí)，默認(rèn)把圖片在水平和垂直方向平鋪以鋪滿整個(gè)元素。這也許是你需要的，但是有時(shí)會(huì)希望圖片只出現(xiàn)一次，或者只在一個(gè)方向平鋪。以下為可能的設(shè)置值和結(jié)果：?代碼background-repeat：?repeat;?/*?默認(rèn)值，在水平和垂直方向平鋪?*/background-repeat：?no-repeat;?/*?不平鋪。圖片只展示一次。?*/background

5、-repeat：?repeat-x;?/*?水平方向平鋪（沿?x?軸）?*/background-repeat：?repeat-y;?/*?垂直方向平鋪（沿?y?軸）?*/background-repeat：?inherit;?/*?繼承父元素的?background-repeat?屬性*/??背景定位（background-position）background-position屬性用來(lái)控制背景圖片在元素中的位置。技巧是，實(shí)際上指定的是圖片左上角相對(duì)于元素左上角的位置。?下面的例子中，設(shè)置了一個(gè)背景圖片并且用background-position屬性來(lái)控制它的位置

6、，同時(shí)也設(shè)置了?background-repeat?為?no-repeat。計(jì)量單位是像素。第一個(gè)數(shù)字表示x軸（水平）位置，第二個(gè)是y軸（垂直）位置。?代碼/*?例?1：?默認(rèn)值?*/background-position：?0?0;?/*?元素的左上角?*//*?例?2：?把圖片向右移動(dòng)?*/background-position：?75px?0;/*?例?3：?把圖片向左移動(dòng)?*/background-position：?-75px?0;/*?例?4：?把圖片向下移動(dòng)?*/background-position：?0?100px;???　　background-

7、position屬性可以用其它數(shù)值，關(guān)鍵詞和百分比來(lái)指定，這比較有用，尤其是在元素尺寸不是用像素設(shè)置時(shí)。關(guān)鍵詞是不用解釋的。x軸上：*?left*?center*?right??y軸上：*?top*?center*?bottom??順序方面和使用像素值時(shí)的順序幾乎一樣，首先是x軸，其次是y軸，像這樣：background-position：?top?right;??使用百分?jǐn)?shù)時(shí)也類似。需要主要的是，使用百分?jǐn)?shù)時(shí)，瀏覽器是以元素的百分比數(shù)值來(lái)設(shè)置圖片的位置的。看例子就好理解了。假設(shè)設(shè)定如下：background-position：?100%?50%;??使用百分?jǐn)?shù)