- content images
- layout images
- user interface images
Content Images
內容圖片，像解說文字一 樣，是跟內容相關的圖片
<img src="cake.png" alt="cake">
載入同一個資料夾中的cake.png
<img src="img/cake.png" alt="cake'>
載入img資料夾中的cake.png
通常會習慣將所有的圖片集中放在一個資料夾中
<img>只有開始標籤(opening tag)，沒有結束標籤(closing tag)</image>
<img>是inline-level tag，通常是block-level tag的子標籤(children)
src屬性描述的是圖片的檔名、位置
alt屬性描述的是當圖片無法載入時，頁面上會顯示的替代文字
如何將圖片置中？
因為<img>是inline-level tag無法使用text-align將圖片置中，所以只要將<img>的display屬性設為block，就可以使用margin:auto將圖片置中
例：
Layout Images
背景圖片
跟背景相關
background-color:#00FF00 設定背景顏色為綠色
background-image: url(img/cakebackground.png);
url()描述的是圖片的檔名和位置，依樣可以使用絕對路徑或相對路經
background-position: top left;
用來定位圖片(image)在container的位置
第一個數值設定的是垂直對齊，top可被替換成center或bottom
第二個數值設定的是水平對齊，left可被替換成center或right
例：
background-repeat: repeat;
用來設定background-image要不要重複排列
可以設定的值
repeat-x 水平重複排列
repeat-y 垂直重複排列
no-repeat 不要重複排列
例：
範例中的CSS可以寫成一行
body{
background: #5f5f5f url(images/gobbler.png) top left repeat;
}
User Interface Images
網頁上不同區塊的圖片，像是<ul>的背景圖就屬於這種
Floating Images
將圖片往左推或往右推，讓其他tag的內容可以將image包圍
tag分為block-level和inline-level
我們想要把圖片和另外2個block-level的tag排列成底下這種效果，通常我們會想設2個div，然後把2個div的display設為inline
但我們實際設定之後，會發現圖片和文字的排列並不是照預想的方式排列
我們沒辦法將block-level的tag放到inline-level tag之下
正確的方法：
將圖片和文字放到同一個<li></li>之中，並設定圖片的float為left
