在CSS中,我們經(jīng)常需要引用一些圖片來裝飾我們的網(wǎng)頁,但是有時(shí)候圖片無法顯示,很可能是因?yàn)槲覀儧]有正確地設(shè)置圖片的路徑。
在CSS中設(shè)置圖片的路徑,有兩種方式:相對路徑和絕對路徑。相對路徑是相對于當(dāng)前CSS文件所在的路徑的路徑,而絕對路徑則是從網(wǎng)站根目錄開始的路徑。
若要使用相對路徑來設(shè)置圖片路徑,可以按照以下格式來編寫CSS代碼:
pre {
background-image: url("../images/background.jpg");
}
在上面的代碼中,我們使用了"../"來返回上一級目錄,然后再進(jìn)入到images文件夾中,找到名為"background.jpg"的圖片。如果我們的CSS文件和images文件夾在同一級目錄下,我們可以直接這樣寫:
pre {
background-image: url("images/background.jpg");
}
這里沒有使用"../",因?yàn)槲覀儾恍枰祷厣弦患壞夸洝?
如果要使用絕對路徑來設(shè)置圖片路徑,我們可以這樣編寫CSS代碼:
pre {
background-image: url("/home/user/images/background.jpg");
}
這個(gè)例子中,我們從網(wǎng)站根目錄開始,進(jìn)入到"home/user/images"文件夾下,找到名為"background.jpg"的圖片。
最后,我們需要注意的是,路徑中的大小寫是敏感的。因此,在編寫路徑時(shí),一定要注意大小寫。
上一篇css中圖像向左浮動
下一篇Hn快穿php