在CSS中,當(dāng)需要引用同目錄下的圖片時(shí),可以使用相對(duì)路徑來(lái)指定圖片的位置,相對(duì)路徑是相對(duì)于當(dāng)前CSS文件所在的目錄來(lái)定位圖片的路徑。
假設(shè)你的CSS文件位于網(wǎng)站的根目錄下,而你想要引用的圖片也位于根目錄下,那么你可以這樣寫(xiě)路徑:
.image-class { background-image: url('image.jpg'); }
在這個(gè)例子中,url('image.jpg')
指定了圖片的相對(duì)路徑,由于圖片和CSS文件位于同一個(gè)目錄下,因此只需要提供圖片的文件名即可。
如果圖片位于CSS文件的子目錄中,你可以通過(guò)添加子目錄的名稱(chēng)來(lái)指定路徑,如果圖片位于images
子目錄下,你可以這樣寫(xiě)路徑:
.image-class { background-image: url('images/image.jpg'); }
在這個(gè)例子中,url('images/image.jpg')
指定了圖片的相對(duì)路徑,其中images
是子目錄的名稱(chēng),image.jpg
是圖片的文件名。
如果CSS文件和圖片位于不同的目錄下,你需要提供從CSS文件到圖片的完整相對(duì)路徑,如果CSS文件位于styles
目錄下,而圖片位于images
目錄下,你可以這樣寫(xiě)路徑:
.image-class { background-image: url('styles/../images/image.jpg'); }
在這個(gè)例子中,url('styles/../images/image.jpg')
指定了圖片的相對(duì)路徑,其中styles/../
表示從CSS文件所在的目錄向上移動(dòng)一個(gè)目錄到根目錄,然后進(jìn)入到images
目錄。