在Vue中,使用CSS設置背景圖像是一個常見的需求。其中一個技術就是使用background屬性與URL函數組合,代碼如下:
background: url("./image.png");
以上代碼中,URL函數指定了圖像路徑,是相對于CSS文件的。如果CSS和圖像文件不在同一目錄下,就要用相對路徑或者絕對路徑來指定圖像文件。這里使用相對路徑。
如果有多個背景圖像,還可以使用逗號分隔多個URL函數,如下代碼:
background: url("./image1.png"), url("./image2.png");
以上代碼中,兩個URL函數指定了兩個背景圖像文件,中間用逗號分隔。如果兩個圖像文件分別是位于該CSS文件同一目錄下的image1.png和image2.png,則可以通過相對路徑來指定。
需要注意的是,在Vue項目中,不同的組件可能會使用相同的圖像文件,那么最好是將這些公共的文件放在一個公共的目錄下。然后在組件中使用相對路徑來引用它們。
上一篇vue a跳轉