Monday, July 09, 2007

背景屬性--Part 2

背景的四大屬性, 位置的部分, 可以運用三種方式搭配x軸與y軸的設定:
  1. top, bottom, center, left, right
  2. x% y%
  3. xpos ypos
這三種方式可以組合搭配, 而不是一次只能用其中一種方式來表達。
例如:
background: url(mygirl.jpg) no-repeat left 20px;
背景圖會齊左並從y位置20px之處顯示一次背景圖。

background: url(mygirl.jpg) no-repeat 30% center;
則會在視窗寬30%之處上下居中顯示一次背景圖。

外部檔案 (URL) 路徑的設定

設定背景圖或者是css外部樣式檔時, 一定會運用到url這個屬性, 通常圖檔存放的位置, 不一定會與網頁檔案相同, 在此便需指定檔案存放的路徑位置, 例如:
background: url(mynoteimg/faint.jpg) 100% top;
即影像檔放在網頁所在目錄的次目錄 mynoteimg之下, 可以不必從根目錄寫起。
或者是
background: url(http://myblog/faint.jpg) no-repeat;
URL列出完整的網址。