css点击文字 div更换背景图片

CSS点击文字并使div更换背景图片通常是在网页交互设计中使用的一种效果。你可以通过组合HTML、CSS和JavaScript来实现这个功能。以下是一个简单的步骤说明：

1. **HTML部分**:

<div class="background-image-container">
  <p class="clickable-text">点击这里</p>
</div>

在这里，`<p>`标签代表你要用户点击的文字，`.background-image-container`用于包裹背景图片。

2. **CSS部分**:

.background-image-container {
  display: inline-block;
  background-image: url('default-image.jpg'); /* 默认背景图 */
}

.clickable-text {
  cursor: pointer; /* 显示鼠标指针为手形 */
}

默认情况下，div有一个背景图片url('default-image.jpg')。

3. **JavaScript部分 (可选，如果需要动态更新)**:

document.querySelector('.clickable-text').addEventListener('click', function() {
  document.querySelector('.background-image-container').style.backgroundImage = 'url(new-image.jpg)'; // 更换为新的背景图片
});

当你在 `.clickable-text` 上点击时，背景图片会更改为 `new-image.jpg`。