2008/11/11

background, background-attachment, background-image

設定元件的背景風格。

background | background-attachment | background-image
background

可以同時設定背景的 background-attachment, background-color, background-image, background-position, background-repeat。使用此特徵時,會先將所有背景的特徵設為初值,然後再依據後接的特徵值設定個別的特徵。可設的特徵值,請參考各個特徵的說明。

background-attachment

當背景圖有設定時,此特徵可指定背景圖是固定於視窗或是隨著文件滾動。請參考下面 background-image 中的範例。特徵值可設為:

  1. fixed:背景圖固定於視窗。
  2. scroll:背景圖隨著文件滾動,此為預設值。
  3. inherit:繼承父元件特徵。

background-image

設定元件背景的圖像。特徵值可設為:

  1. <uri>:指定 圖像的網址
  2. none:無圖,此為預設值。
  3. inherit:繼承父元件特徵。
  • 由於背景圖設為 background-attachment:fixed,所以背景圖與文字的相對位置是變動的。
  • background-attachment:fixed 在 IE6 失敗;IE8, Firefox3.0, Safari, Chrome 都成功。

在 IE6 使用 background-attachment:fixed。IE6 的 fixed 使用與其它瀏覽器有不同。首先 fixed 用在 BODY 元素 一切正常。如果用在其它元素,則該元素必須設定 overflow:auto, overflow:scroll。這時移動元素的捲軸鈕可以看出背景圖是固定。但是移動父元素的捲軸鈕,則背景圖會隨著滾動;這點與其它瀏覽器不同;依據 CSS 的定義,fixed 是將背景圖固定在網頁上,因此不論移動視窗, 父元素或子元素的捲軸鈕,背景圖都應該是固定的。

:HOVER, :ACTIVE 的應用。使用時要注意,在 IE6 中 :HOVER, :ACTIVE 只能用在 ANCHOR 元素。

javascript 應用。可以用 style 物件 的特徵 background, backgroundAttachment, backgroundImage 讀取或設定特徵值。

  • 不同瀏覽器的輸出格式有不同。