在前端開發(fā)中，很多時候我們需要給用戶一些反饋。比如，當用戶點擊一個圖片時，我們希望能夠播放一段聲音來提示用戶，這時候就需要用到 CSS 來實現(xiàn)了。

/* 首先，我們需要把圖片設置成可點擊的 */
img {
cursor: pointer;
}
/* 然后，定義一個類名為“sound”的類來表示需要播放聲音的圖片 */
.sound {
/* 這個屬性將圖片變成可點擊的 */
cursor: pointer;
/* 這個屬性則用來隱藏瀏覽器默認的圖標 */
background-image: none;
}
/* 最后，我們使用 JavaScript 來監(jiān)聽點擊事件，如果用戶點擊了帶有“sound”類名的圖片，就播放相應聲音 */
let audios = {
'cat': new Audio('cat.mp3'),
'dog': new Audio('dog.mp3')
};
let imgs = document.querySelectorAll('.sound');
imgs.forEach(img =>{
img.addEventListener('click', () =>{
let soundFile = img.dataset.sound;
audios[soundFile].play();
});
});

這樣，我們就可以很容易地給圖片加上點擊聲音了。當然，具體實現(xiàn)方式可能有所不同，但本質(zhì)上都是通過 CSS 來定義點擊事件的樣式，再通過 JavaScript 來監(jiān)聽該事件。希望這篇文章能幫助到您。