網頁排版_主版頁面(MasterPage )上的圖抓不到(路徑錯誤)

現在使用ASP.NET寫網頁的人通常都會使用主版頁面MasterPage來使頁面有著統一的設定，但是當我們把精心設計好的主版頁面要套上系統時，時常都會發生一個問題：圖片沒辦法正常顯示；而我們在瀏覽器上檢視原始碼會發現，主版頁面上設定好的圖片路徑不會改變，但被套用該主版頁面的網頁並不一定處於同一個資料目錄之下，這會造成只要套用到不同路徑之下時，圖片就沒辦法正常顯示。

舉例來說，主版頁面放在根目錄，而影像檔(aa.jpg)都在根目錄下的Images內，所以主版頁面所下的CSS路徑就會是background-image:url(Images/aa.jpg)，但如果這個主版頁面套用到根目錄上GISSYS的目錄內的網頁上，那麼瀏覽器還是會去解析background-image:url(Images/aa.jpg)這句，而非background-image:url(../Images/aa.jpg)；故造成路徑錯誤的情況產生。

當然，我們可以很拼的把全部的資料夾階級都設成一樣，或是做很多個主版頁面共不同階層的使用，但我想正常人應該都不會走這兩條奇怪的路；所以，我們到底要怎麼樣才可以在使用主版頁面讀圖一值保持正確的路徑呢？

說起來很無聊，其實就是使用CSS檔，在使用VS2008寫ASP.NET時，有時候調整一個字型或是顏色時，軟體就會自動幫我們增加一個Style1的CSS，如果不去整理會發現馬上你的aspx檔內就會有類似Style58之類的東西，所以我們應該做的就是把這些內容拉出去另一個檔案，專門存放這些設定，當然也包括前面所提到的圖片檔路徑。

那把路徑存出去會有什麼效果？要最要的是，當你的網頁去參考這個CSS檔案時，他的路徑將會以CSS檔放置位置為基礎去抓取圖的位置，也就是說當你CSS檔存放位置固定後，任何網頁抓圖，路徑都不會改變；所以套用到主版頁面上當然也就不會跟著套用網頁的不同而產生圖片路徑錯誤的問題。

2010年11月23日補充：
1. 建立一個XX.CSS的檔案。
2. 將要使用的圖片位置記錄於上述檔案(語法：background-image:url(../Images/Title.JPG);)
3. 在主版頁面使用該cssclass
4. 就像是下圖