背景圖片

• background-image：使用 url(pic路徑) 來顯示圖片
  • background-image: url(./img/logo.png);
  • 若圖片尺寸大小 < 區塊設定尺寸，預設會重複排列
• background-repeat：設定重複狀況，透過重複減少圖片載入
  • repeat：重複 x (水平)和 ｙ (垂直)
  • no-repeat：不重複
  • repeat-x：只重複 x (水平)
  • repeat-y：只重複 y (垂直)
• background-color：設定背景顏色，輸入顏色如 red
• background-position：設定 background-image 圖片位置，預設為水平與垂直皆置中 center
  • 設定 2 組：左右 left or right 與 上下 top or bottom 各1 個
  • 設定 1 組：未設定的那組為置中 center，因此若只有 left 代表靠左並且上下置中
  • 直接指定位置： 10px 或 30%
• background：可以綜合上述的全部屬性，寫在一起，以空格隔開
  • background: url(./img/logo.png) no-repeat left top

補充資料與其他的用法，可以參考金魚系列的 CSS 系列文

• 金魚都能懂的CSS必學屬性

• 圖片的格式

  • jpg：無透明背景
  • gif：有透明背景，有動畫效果，只有 256 色
  • png：有透明背景，若為 png8 為 256 色(2 的 8 次方)，pn24 為 2 的 24 次方種色彩

參考資料

• CSS background 背景
• Background-repeat- 金魚都能懂的CSS必學屬性
• Background-position- 金魚都能懂的CSS必學屬性
• Background - 金魚都能懂的CSS必學屬性

次回

圖片的部分似乎比我預期的快，預計說明 head 的部分