CSS中的url函數用于引用外部文件,例如圖片、字體、音頻、視頻等資源。url函數接受一個參數,就是資源的路徑。
background-image: url('image/bg.jpg'); font-family: url('https://fonts.gstatic.com/s/opensans/v18/memnYaGs126MiZpBA-UvWbX2vVnXBbObjli0nKtwiXw.woff2');
在上面的例子中,background-image屬性使用了相對路徑來引用圖片資源,而font-family屬性使用了絕對路徑來引用字體資源。我們在實際使用中應該根據具體情況來選擇使用相對路徑還是絕對路徑。
除此之外,url函數還可以用來引用data uri(數據URI),不需要使用絕對或相對路徑。data uri是一種能夠將小文件(通常是圖片)轉換成base64編碼后直接嵌入HTML或CSS文檔中的技術。
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAIAAAC0tAIdAA...')
在上面的例子中,我們使用了data uri來嵌入一個png格式的圖片文件。
需要注意的是,盡管CSS中可以使用url函數引用外部資源,但是這種方法并不適用于所有頁面情況。如果我們需要考慮到SEO優化、緩存等問題,可能需要使用其他的方法來引用資源。
總之,url函數是CSS中常用的聲明規則之一,我們可以使用它來靈活地引用頁面中所需的各種資源。