CSS中使用url地址可以引用圖片、字體、音頻等資源。正確的url地址寫法會影響到資源的加載和使用效果。下面介紹幾種常用的url地址寫法。
1. 相對路徑
相對路徑是相對于CSS文件所在的位置來確定資源的位置。如果CSS文件和資源文件在同一文件夾下,則可以直接使用文件名。如果CSS文件在上一級文件夾,則需要使用../表示回到上一級目錄。
示例代碼:
p { background-image: url(bg.jpg); font-family: url("../fonts/arial.ttf"); }2. 絕對路徑 絕對路徑是從網(wǎng)站根目錄開始的路徑。如果資源文件在網(wǎng)站根目錄下的images文件夾里,則可以使用/images/bg.jpg來引用。 示例代碼:
p { background-image: url(/images/bg.jpg); font-family: url(http://www.example.com/fonts/arial.ttf); }3. data URI data URI是將資源文件編碼成base64字符串,直接嵌入到CSS代碼中,避免了HTTP請求,加載速度更快。但是對于大型圖片和音頻文件,會增加CSS文件的體積和加載時間。 示例代碼:
p { background-image: url(data:image/png;base64,iVBORw0KGg.....); }在寫CSS代碼時,需要根據(jù)實際情況選擇不同的url地址寫法,以保證資源的正確加載和使用效果。