background-image屬性

background-image 屬性

• 實例，設置body元素的背景圖像：

body
{
    background-image: url('paper.gif');
    background-color: #cccccc;
}

• background-image
  • url('URL') 指向圖像的路徑。
  • none 默認值。不顯示背景圖像。
  • inherit 規定應該從父元素繼承 background-image 屬性的設置。
• background-attachment
  • scroll 默認值。背景圖像會隨着頁面其余部分的滾動而移動。
  • fixed 當頁面的其余部分滾動時，背景圖像不會移動。
  • inherit 規定應該從父元素繼承 background-attachment 屬性的設置。
• background-color
  • color_name 規定顏色值為顏色名稱的背景顏色（比如 red）。
  • hex_number 規定顏色值為十六進制值的背景顏色（比如 #ff0000）。
  • rgb_number 規定顏色值為 rgb 代碼的背景顏色（比如 rgb(255,0,0)）。
  • transparent 默認。背景顏色為透明。
  • inherit 規定應該從父元素繼承 background-color 屬性的設置。
• background-repeat
  • repeat 默認。背景圖像將在垂直方向和水平方向重復。
  • repeat-x 背景圖像將在水平方向重復。
  • repeat-y 背景圖像將在垂直方向重復。
  • no-repeat 背景圖像將僅顯示一次。
  • inherit 規定應該從父元素繼承 background-repeat 屬性的設置。
• background-size: length|percentage|cover|contain;
  • length 設置背景圖像的高度和寬度。第一個值設置寬度，第二個值設置高度。如果只設置一個值，則第二個值會被設置為 "auto"。
  • percentage 以父元素的百分比來設置背景圖像的寬度和高度。第一個值設置寬度，第二個值設置高度。如果只設置一個值，則第二個值會被設置為 "auto"。
  • cover 把背景圖像擴展至足夠大，以使背景圖像完全覆蓋背景區域。背景圖像的某些部分也許無法顯示在背景定位區域中。
  • contain 把圖像圖像擴展至最大尺寸，以使其寬度和高度完全適應內容區域。