在網站制作中，經常會使用到圖片資源來進行美化設計。而這些圖片資源往往會以文件的形式存在于服務器中，需要通過代碼的調用才能在網頁中顯示出來。本文將介紹如何根據css文件下載圖片，從而實現圖片資源的調用。

首先需要明確的是，css文件中的background屬性可以用來設置元素的背景圖像，而其中的url()函數就是用來引用圖片資源的。例如：

div {
background: url(/images/icon.png);
}

上述代碼是給div元素設置了一個背景圖像，圖像資源位于服務器的/images文件夾中，文件名為icon.png。那么如何通過這個代碼下載該圖片呢？

可以通過以下的javascript代碼來實現：

function downloadImage(url) {
var image = new Image();
image.src = url;
image.onload = function() {
var canvas = document.createElement('canvas');
canvas.width = this.width;
canvas.height = this.height;
var ctx = canvas.getContext('2d');
ctx.drawImage(this, 0, 0);
var link = document.createElement('a');
link.download = 'image.png';
link.href = canvas.toDataURL('image/png');
link.click();
}
}

上述代碼中，我們新建了一個Image對象，并將其src屬性設為圖片資源的url，從而下載該圖片。其中，onload函數在圖片加載完成后執行，我們利用canvas將下載的圖片繪制在其中，并新建一個a標簽，將canvas中的圖像通過toDataURL()方法轉換為dataURL形式，并在link的href屬性中綁定該URL。最后通過link.click()來模擬點擊鏈接下載圖片。

最后，我們可以在需要下載圖片的地方調用downloadImage()函數，同時將需要下載的圖片的url作為參數傳入即可完成下載。