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值,這樣在網速緩慢背景圖像未載入完成或 是背景圖像丟失之後, 仍然可以提供很好的文字可識別性。 比如背景圖像是一張黑色的底圖,那麼文字的顏色自然而然會選擇淺色調的甚至白色,如果此時背景圖像 未載入完成或者圖像丟失,那麼就需要定義一個黑色的背景顏色,才可以保持文字的可識別性。