首頁 >web前端 >css教學 >當 CSS 檔案位於子目錄中時,如何​​在 CSS 背景聲明中引用圖像檔案?

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

Susan Sarandon
Susan Sarandon原創
2024-11-12 14:09:021012瀏覽

How to Reference an Image File in a CSS Background Declaration When Your CSS File is in a Subdirectory?

在 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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn