溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹css中圖片路徑問題的示例分析，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
在CSS文件里，有時要用到background，即加一個背景圖片，一般在做按鈕樣式時會經常用到。
css中加背景圖片根據圖片及css文件的相對位置分一下幾種類型：
1.同包下：background : url(aaa.gif);
2.不同包：
在這種情況下有2中方法可以設置，一種是使用絕對路徑，即https://cache.yisu.com/upload/information/20210311/298/7680.com這種，不過一般不推薦這么用，不利于項目移植；一種是使用相對路徑，首先需要找到圖片文件和css文件共同的一個根目錄，然后再加上圖片的子目錄，比如：
css文件位置：WebRoot/test/css/a.css
圖片文件位置：WebRoot/platform/resource/images/icons/a.gif
想要找到共同的根目錄就需要用到 "../" 這個路徑的意思是上一級目錄，如果是兩層上級目錄，就是 "../../" 那么，按照這種寫法的話，a.css中得背景圖片css應該這么寫：
代碼如下:
background:url(../../platform/resource/images/icons/a.gif)
為什么呢？
首先，我們觀察這兩個文件的位置，可以發現，共同的根目錄是WebRoot，
我們首先在a.css的位置找到WebRoot，所以有了"../../" 然后拼接圖片的子目錄的路徑 又有了"platform/resource/images/icons/a.gif" 合在一起后就是上面的結果了。
以上是“css中圖片路徑問題的示例分析”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
