CSS變換顏色是Web開發中常用的技術之一。在網頁設計中，顏色的搭配常常是影響整個界面美觀度的重要因素之一。通過CSS并結合JavaScript，我們可以實現顏色自動變換、鼠標懸浮顏色變化等效果。

/* 改變文字顏色 */
p {
color: blue;
}
/* 改變背景顏色 */
body {
background-color: gray;
}
/* 改變鼠標懸浮顏色 */
p:hover {
color: red;
}

在以上代碼中，我們可以看到三條CSS樣式。第一條改變了所有段落的文字顏色為藍色，第二條改變了整個頁面的背景顏色為灰色，第三條讓所有段落在鼠標懸浮時文本顏色變紅。

除了以上簡單的顏色變換，我們還可以控制元素的不透明度來實現更多樣的效果。例如，我們可以通過改變圖片透明度實現圖片陰影、文字透明效果等。

/* 圖片陰影 */
img {
box-shadow: 5px 5px 5px gray;
}
/* 文字透明 */
p {
opacity: 0.5;
}

在以上代碼中，我們使用了box-shadow屬性為圖片添加陰影效果，同時設置了陰影的水平、垂直和模糊程度。使用opacity屬性可以讓元素的不透明度變化，實現文字透明效果。

總的來說，CSS變換顏色可以為網頁設計帶來豐富的視覺效果。通過掌握不同的CSS屬性和JavaScript結合，我們可以實現更加生動、豐富的網頁內容。