在網頁設計中，CSS是必不可少的技術之一。它可以使我們的網頁看起來更加美觀和專業。在實際應用過程中，我們會經常需要動態地添加或刪除某個元素的背景顏色。本文將教你如何使用CSS來實現點擊添加背景顏色的功能。

<script>
function changeColor() {
var ele = document.getElementById("bg-color"); // 獲取需要修改背景顏色的元素
if (ele.style.backgroundColor === "red") { // 如果當前背景顏色為紅色
ele.style.backgroundColor = "white"; // 則修改為白色
} else { // 否則修改為紅色
ele.style.backgroundColor = "red";
}
}
</script>
<div id="bg-color" onclick="changeColor()">
<p>這是一個可以點擊變色的示例</p>
</div>

上面的代碼使用了JavaScript來實現點擊元素時切換其背景顏色的功能。其中，getElementById方法用于獲取指定ID的元素，style.backgroundColor則可以獲取或設置元素的背景顏色屬性。

最后附上一個具體的例子，你可以將以下代碼復制到你的HTML文件中，然后嘗試點擊元素來切換其背景顏色。

<style>
div {
padding: 10px;
border: 1px solid black;
cursor: pointer;
}
</style>
<script>
function changeColor() {
var ele = document.getElementById("bg-color"); // 獲取需要修改背景顏色的元素
if (ele.style.backgroundColor === "red") { // 如果當前背景顏色為紅色
ele.style.backgroundColor = "white"; // 則修改為白色
} else { // 否則修改為紅色
ele.style.backgroundColor = "red";
}
}
</script>
<div id="bg-color" onclick="changeColor()">
<p>這是一個可以點擊變色的示例</p>
</div>