ASP.NET MasterPage 圖片路徑解決方案：CSS 背景圖法

MasterPage 與 UserControl 中引用圖片路徑因頁面層級不同而失效。三種傳統路徑寫法各有缺陷：

解決方案：CSS 背景圖 + 相對路徑

CSS 檔案通常放在固定位置（`App_Themes/ThemeName/Style.css`），其相對路徑穩定。

CSS 定義

.HideBar {
    height: 56px; width: 5px; cursor: pointer;
    background-image: url(../../images/hide.gif); /* 相對 CSS 檔位置 */
}

套用方式

<div class="HideBar" runat="server"></div>
<asp:Button CssClass="HideBar" runat="server" />

原理

• 瀏覽器解析 CSS 時，`url()` 路徑**相對 CSS 檔案本身**，而非引用 CSS 的頁面。
• 只要 CSS 檔位置固定，圖片相對 CSS 的路徑永遠正確。
• 適用於 `` 背景圖、按鈕圖示、版面裝飾圖。

進階：內容圖片 (``) 怎麼辦？

1. Page.ResolveUrl：`
2. 基底頁面屬性：在 `BasePage` 定義 `ImageBasePath` 回傳 `ResolveUrl("~/images/")`，內容頁統一使用。
3. Theme Skin：在 `.skin` 設定 `ImageUrl="~/images/logo.png"`，ASP.NET 自動解析。

綜合建議：裝飾圖用 CSS 背景圖，內容圖用 `ResolveUrl` 或 Skin，徹底解決路徑痛點。