css里面圖片路徑問題(同包/不同包)探討
發(fā)布時間:2013-04-11 15:22:24 作者:佚名
我要評論

css中加背景圖片根據(jù)圖片及css文件的相對位置分一下幾種類型1.同包下2.不同包,接下來針對這兩種情況做一下介紹,感興趣的朋友可以參考下哈,希望可以幫助到你
在CSS文件里,有時要用到background,即加一個背景圖片,一般在做按鈕樣式時會經(jīng)常用到。
css中加背景圖片根據(jù)圖片及css文件的相對位置分一下幾種類型:
1.同包下:background : url(aaa.gif);
2.不同包:
在這種情況下有2中方法可以設(shè)置,一種是使用絕對路徑,即http://www.iteye.com/aaa.gif這種,不過一般不推薦這么用,不利于項目移植;一種是使用相對路徑,首先需要找到圖片文件和css文件共同的一個根目錄,然后再加上圖片的子目錄,比如:
css文件位置:WebRoot/test/css/a.css
圖片文件位置:WebRoot/platform/resource/images/icons/a.gif
想要找到共同的根目錄就需要用到 "../" 這個路徑的意思是上一級目錄,如果是兩層上級目錄,就是 "../../" 那么,按照這種寫法的話,a.css中得背景圖片css應(yīng)該這么寫:
background:url(../../platform/resource/images/icons/a.gif)
為什么呢?
首先,我們觀察這兩個文件的位置,可以發(fā)現(xiàn),共同的根目錄是WebRoot,
我們首先在a.css的位置找到WebRoot,所以有了"../../" 然后拼接圖片的子目錄的路徑 又有了"platform/resource/images/icons/a.gif" 合在一起后就是上面的結(jié)果了。
css中加背景圖片根據(jù)圖片及css文件的相對位置分一下幾種類型:
1.同包下:background : url(aaa.gif);
2.不同包:
在這種情況下有2中方法可以設(shè)置,一種是使用絕對路徑,即http://www.iteye.com/aaa.gif這種,不過一般不推薦這么用,不利于項目移植;一種是使用相對路徑,首先需要找到圖片文件和css文件共同的一個根目錄,然后再加上圖片的子目錄,比如:
css文件位置:WebRoot/test/css/a.css
圖片文件位置:WebRoot/platform/resource/images/icons/a.gif
想要找到共同的根目錄就需要用到 "../" 這個路徑的意思是上一級目錄,如果是兩層上級目錄,就是 "../../" 那么,按照這種寫法的話,a.css中得背景圖片css應(yīng)該這么寫:
復(fù)制代碼
代碼如下:background:url(../../platform/resource/images/icons/a.gif)
為什么呢?
首先,我們觀察這兩個文件的位置,可以發(fā)現(xiàn),共同的根目錄是WebRoot,
我們首先在a.css的位置找到WebRoot,所以有了"../../" 然后拼接圖片的子目錄的路徑 又有了"platform/resource/images/icons/a.gif" 合在一起后就是上面的結(jié)果了。
相關(guān)文章
css全屏背景圖片設(shè)置,django加載圖片路徑詳解
下面小編就為大家?guī)硪黄猚ss全屏背景圖片設(shè)置,django加載圖片路徑詳解。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-06-01- 這篇文章主要介紹了完美解決webpack打包css背景圖片路徑問題,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-07-01