在網頁開發中，頭像上傳是一個很常見的功能。而使用 CSS 可以實現上傳頭像時的預覽效果。下面我們一起來看一下如何實現吧！

首先，我們需要一個上傳按鈕和一個圖片預覽區域。HTML 代碼如下：

<input type="file" id="avatar">
<div id="preview"></div>

接下來，我們需要用 CSS 來顯示上傳的圖片。具體實現方法如下：

#preview {
width: 200px;
height: 200px;
background-size: cover;
background-position: center;
background-image: url("default-avatar.jpg");
}
#avatar {
display: none;
}
#avatar:active ~ #preview {
opacity: 0.5;
}
#avatar:focus ~ #preview {
border: 2px solid blue;
}

說明一下上面的代碼：首先，我們設置了預覽區域的大小，并將默認的背景圖片設置為頭像的默認圖片，這里是 default-avatar.jpg。

然后，我們將上傳按鈕設置為不可見，因為我們不需要讓用戶直接點擊它來上傳頭像。

接下來，我們使用了偽類選擇器 :active 和 :focus 來實現 upload 按鈕被點擊或獲得焦點時的效果。當用戶按下按鈕時，預覽區域的透明度會變為 0.5，用來說明用戶點擊了這個按鈕。當用戶點擊上傳按鈕時，預覽區域的邊框變為藍色以示區別。

最后，我們需要用 JavaScript 實現上傳和預覽功能。具體實現代碼如下：

const avatar = document.getElementById('avatar');
const preview = document.getElementById('preview');
avatar.addEventListener('change', function() {
const file = this.files[0];
const reader = new FileReader();
reader.onload = function() {
preview.style.backgroundImage = `url(${reader.result})`;
};
if (file) {
reader.readAsDataURL(file);
} else {
preview.style.backgroundImage = 'url("default-avatar.jpg")';
}
});

我們使用了 FileReader API 來讀取用戶選擇的圖片文件，然后將讀取到的圖片數據用 URL.createObjectURL() 方法轉換成 URL 地址，最后將地址設置為預覽區域的背景圖片。

就這樣，一個簡單卻實用的頭像上傳預覽功能就實現了。希望對大家有所幫助！