[CSS基礎教程]background屬性詳細解析

CSS背景映像屬性background詳細解析

CSS的背景屬性“background”提供了眾多屬性值，如顏色、映像、定位等，為網頁背景映像的定義提供了極大的便利。看看background提供的屬性值：

background : background-color  | background-image  | background-repeat  | background-attachment  | background-position

從屬性值的名字就可以很明白的看出來，分別是：顏色、映像、鋪排、滾動、定位，其中background-repeat、background-position必須是在指定了background-image屬性值後才有效。

background-color:transparent | color 。“transparent”是background-color的預設屬性值（紅色字表示預設值），意為背景色透明，也就是無背景色；而“color”則指的是顏色了，可以是HTML語言支援英文單詞，也可以是十六進位的顏色值，當然推薦還是使用十六進位的顏色值來表示，比如黑色使用“#000”。

background-image:none | url 。預設屬性值是無背景圖，需要使用背景圖時可用url進行匯入。

background-repeat:repeat | no-repeat  | repeat-x  | repeat-y 。預設屬性值是背景映像在縱向和橫向上平鋪，如果不希望映像平鋪而是以一個完整的襯圖來顯示的時候則使用“no-repeat”，相同的道理在橫向上平鋪則是使用”repeat-x”縱向上平鋪則使用”repeat-y”。

background-attachment:scroll | fixed 。“scroll”是背景映像隨對像內容滾動，“fixed”則是背景映像固定。

background-position:position(length)  | position(length) 。對象的背景映像位置有兩種方式可選擇，一種是使用position（top | center | bottom | left | center | right）來定位背景映像位置，而另一種方式則是使用lefgth（數值）來定位，使用數值需要注意的是，當只有一個數值時，這個值將用於橫座標，縱座標將預設是50%，如果有兩個數值時，則分別是橫座標、縱座標。

瞭解並熟悉了以上background屬性及屬性值之後，很容易的就可以對網頁的背景映像做出合適的處理。但是在這裡有一個小技巧，那就是在定義了background-image屬性之後，應該定義一個與背景映像顏色相近的background-color值，這樣在網速緩慢背景映像未載入完成或是背景映像丟失之後，仍然可以提供很好的文字可識別性。比如背景映像是一張黑色的底圖，那麼文字的顏色自然而然會選擇淺色調的甚至白色，如果此時背景映像未載入完成或者映像丟失，那麼就需要定義一個黑色的背景顏色，才可以保持文字的可識別性。