當 CSS 檔案位於子目錄中時，如何​​在 CSS 背景聲明中引用圖像檔案？

在 CSS 中建立背景圖片路徑

在本文中，我們將探討在 CSS 背景聲明中引用圖片檔案的方法。

上下文

開發人員遇到了一個問題，即他們的背景圖像未應用於元素。他們的 CSS 檔案位於目錄 Project/Web/Support/Styles/file.css 中，圖片位於目錄 Project/Web/images/image.png 中。

嘗試失敗

開發人員嘗試了多種路徑變化，但都未成功：

background-image: url(/images/image.png);
background-image: url('/images/image.png');
background-image: url("images/image.png");
background-image: url(../images/image.png);
background-image: url('../images/image.png');
background-image: url("..images/image.png");

解決方案

解決方案在於考慮CSS文件位置的上下文。在這種情況下，CSS 檔案比影像檔案深兩層。因此，要正確引用圖像，路徑應使用兩個“..”實例，表示在目錄結構中向上遍歷兩層：

background-image: url('../../images/image.png');

現在，背景圖像將按預期應用網頁。

以上是當 CSS 檔案位於子目錄中時，如何​​在 CSS 背景聲明中引用圖像檔案？的詳細內容。更多資訊請關注PHP中文網其他相關文章！