css的background屬性小記

文章目錄

• 元素背景的範圍

background 簡寫屬性在一個聲明中設定所有的背景屬性。

可以按順序設定如下屬性：

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

如果不設定其中的某個值，也不會出問題，比如 background:#ff0000 url('smiley.gif'); 也是允許的。

通常建議使用這個屬性，而不是分別使用單個屬性，因為這個屬性在較老的瀏覽器中能夠得到更好的支援，而且需要鍵入的字母也更少。

 

執行個體

如何在一個聲明中設定所有背景屬性：

body
{ 
  background: #00FF00 url(bgimage.gif) no-repeat fixed top;
}
 

background-color 屬性設定元素的背景顏色。

元素背景的範圍

background-color 屬性為元素設定一種純色。這種顏色會填充元素的內容、內邊距和邊框地區，擴充到元素邊框的外邊界（但不包括外邊距）。如果邊框有透明部分（如虛線邊框），會透過這些透明部分顯示出背景色。

 

邊框與背景

CSS 規範指出，邊框繪製在“元素的背景之上”。這很重要，因為有些邊框是“間斷的”（例如，點線邊框或虛線框），元素的背景應當出現在邊框的可見部分之間。

CSS2 指出背景只延伸到內邊距，而不是邊框。後來 CSS2.1 進行了更正：元素的背景是內容、內邊距和邊框區的背景。大多數瀏覽器都遵循 CSS2.1 定義，不過一些較老的瀏覽器可能會有不同的表現。

 

transparent 值

儘管在大多數情況下，沒有必要使用 transparent。不過如果您不希望某元素擁有背景色，同時又不希望使用者對瀏覽器的顏色設定影響到您的設計，那麼設定 transparent 值還是有必要的。

 

可能的值

值	描述
color_name	規定顏色值為顏色名稱的背景顏色（比如 red）。
hex_number	規定顏色值為十六進位值的背景顏色（比如 #ff0000）。
rgb_number	規定顏色值為 rgb 代碼的背景顏色（比如 rgb(255,0,0)）。
transparent	預設。背景顏色為透明。

 

background-image 屬性為元素設定背景映像。

元素的背景佔據了元素的全部尺寸，包括內邊距和邊框，但不包括外邊距。

預設地，背景映像位於元素的左上方，並在水平和垂直方向上重複。

提示：請設定一種可用的背景顏色，這樣的話，假如背景映像不可用，頁面也可獲得良好的視覺效果。

 

 

background-repeat 屬性設定是否及如何重複背景映像。

預設地，背景映像在水平和垂直方向上重複。

提示：背景映像的位置是根據 background-position 屬性設定的。如果未規定 background-position 屬性，映像會被放置在元素的左上方。

 

可能的值

值	描述
repeat	預設。背景映像將在垂直方向和水平方向重複。
repeat-x	背景映像將在水平方向重複。
repeat-y	背景映像將在垂直方向重複。
no-repeat	背景映像將僅顯示一次。

 

background-attachment 屬性設定背景映像是否固定或者隨著頁面的其餘部分滾動。

 

可能的值

值	描述
scroll	預設值。背景映像會隨著頁面其餘部分的滾動而移動。
fixed	當頁面的其餘部分滾動時，背景映像不會移動。

 

 

background-position 屬性設定背景映像的起始位置。

這個屬性設定背景原映像的位置，背景映像如果要重複，將從這一點開始。

提示：您需要把 background-attachment 屬性設定為 "fixed"，才能保證該屬性在 Firefox 和 Opera 中正常工作。

 

可能的值

值	描述
top left top center top right center left center center center right bottom left bottom center bottom right	如果您僅規定了一個關鍵詞，那麼第二個值將是"center"。 預設值：0% 0%。
x% y%	第一個值是水平位置，第二個值是垂直位置。 左上方是 0% 0%。右下角是 100% 100%。 如果您僅規定了一個值，另一個值將是 50%。
xpos ypos	第一個值是水平位置，第二個值是垂直位置。 左上方是 0 0。單位是像素 (0px 0px) 或任何其他的 CSS 單位。 如果您僅規定了一個值，另一個值將是50%。 您可以混合使用 % 和 position 值。