在網(wǎng)頁開發(fā)中，經(jīng)常需要獲取本機的圖片文件，然后通過CSS顯示在頁面中。下面我們來了解一下如何使用CSS獲取本機圖片。 首先我們需要使用CSS3的FileReader API，該API允許我們讀取用戶選擇的文件，包括本機的圖片文件。 代碼如下：

var input = document.querySelector('input[type=file]');
input.addEventListener('change', function() {
var file = input.files[0];
var reader = new FileReader();
reader.addEventListener("load", function () {
document.getElementById("image").style.backgroundImage = "url(" + reader.result + ")";
}, false);
if (file) {
reader.readAsDataURL(file);
}
});

在上面的代碼中，我們首先獲取input元素，然后監(jiān)聽它的change事件，當用戶選擇了圖片文件之后，我們使用FileReader對象讀取文件內(nèi)容。 當文件讀取完成后，我們使用URL.createObjectURL方法將讀取的結(jié)果轉(zhuǎn)換成URL，并將其設(shè)置為圖片的背景。 同時，在HTML中，我們要為圖片元素設(shè)置一個特殊的id，如下所示：

點擊下面的按鈕選擇一張本機上的圖片：
顯示選擇的圖片：

在上面的代碼中，我們使用了一個div元素來顯示選擇的圖片，該元素具有id為“image”。 通過上述代碼，我們就可以簡單地實現(xiàn)CSS顯示本機圖片的功能了。用戶只需要選擇本地圖片，然后通過CSS在網(wǎng)頁中顯示即可。