css点击背景颜色改变

CSS点击背景颜色改变是一种常见的效果，非常适用于网站的交互设计。这种效果可以让用户在点击页面上的不同元素时，动态地改变背景色，增强了用户的视觉体验。

//HTML
<div class="bg-change">
  <p>点击我改变背景颜色</p>
</div>
//CSS
.bg-change {
  background-color: #fff;
  cursor: pointer;
}
.bg-change.clicked {
  background-color: #333;
  color: #fff;
}
//Javascript
var bgChange = document.querySelector('.bg-change');
bgChange.addEventListener('click', function() {
  bgChange.classList.toggle('clicked');
}
);
 

在上面的代码中，我们先创建了一个 div 元素，它有一个 class 名称为"bg-change"，在 CSS 中我们设置其初始背景色为 #fff，在鼠标指针经过时会变为手型指针，作为用户点击的指示。接着，我们给 div 添加了一个"clicked"的 class 名称，当用户点击了 div 元素后，这个 class 名称就会被添加到 div 元素中，从而改变其背景颜色为 #333。

最后，我们通过 JavaScript 给 div 元素添加了一个事件监听器，用于监听用户的鼠标点击事件。当 div 元素被点击后，我们通过 classList.toggle() 方法来切换 div 元素的"clicked" class 名称。这里的 toggle() 方法会在 class 名称已存在的情况下自动移除它，否则会添加它。

以上就是使用 CSS 点击背景颜色改变的简单实现方法，你可以根据自己的需要来更改代码，实现更多个性化的效果。