CSS是一種強大的樣式表語言，它可以改變網頁內容的外觀和布局。其中一項非常有趣的功能是給圖片添加熱點顏色。熱點顏色是指當鼠標懸停在圖片上時，部分區域會觸發一個顏色變化。這種效果通常被用來提供交互性或可點擊區域。在本文中，我們將學習如何使用CSS為圖片添加熱點顏色。

img {
position: relative;
}
img:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
opacity: 0;
transition: opacity .5s ease;
}
img:hover:before {
opacity: 0.5;
}

在上面的代碼中，我們首先使用position屬性將圖像元素的定位設置為相對位置。接著，我們添加了:before偽元素，并對其設置絕對定位。我們將該元素的位置設置為圖像元素的左上角，并讓其寬度和高度等于圖像元素的寬度和高度。

我們還為偽元素設置了background-color屬性，并將其opacity值設置為零。這意味著在默認情況下，偽元素是不可見的。當圖像元素處于懸停狀態時，我們使用:hover偽類選擇器來改變偽元素的opacity值，使其變為半不透明狀態（opacity:0.5;）。

這樣做可為圖像元素添加一個簡單但有效的熱點顏色。你可以通過更改background-color值來改變默認顏色，并調整opacity值來更改半透明程度。您也可以在:before偽元素中添加其他樣式規則，例如border-radius或box-shadow，來使熱點效果更加有趣。