html div标签鼠标点击后背景区域缩小

HTML `<div>` 标签本身并不具备直接改变背景区域大小的功能，但它可以配合CSS样式和JavaScript来实现这样的效果。当鼠标点击`<div>`时，我们通常会创建一种交互体验，比如悬停效果或点击收缩背景。下面是一个简单的示例：

首先，在HTML中，你可以有一个普通的`<div>`元素：

<div class="clickable-area" onclick="shrinkBackground()">点击收缩</div>

然后，使用CSS设置初始样式和点击后的效果：

.clickable-area {
  width: 200px;
  height: 200px;
  background-color: #f00; /* 示例红色背景 */
  transition: background-size 0.5s ease; /* 添加过渡效果，让缩放平滑 */
}

.clickable-area.clicked {
  background-size: 80% 80%; /* 点击后，背景大小减小 */
}

最后，在JavaScript中添加事件处理函数`shrinkBackground()`:

function shrinkBackground() {
  var element = document.querySelector('.clickable-area');
  if (!element.classList.contains('clicked')) { // 初始状态未点击
    element.classList.add('clicked'); // 添加clicked类名触发背景缩小
  } else { // 已经点击过，则恢复原状
    element.classList.remove('clicked');
  }
}

这个例子中，当你点击`<div>`时，背景颜色和大小都会缩小。当你再次点击或移除鼠标，它会恢复到原来的尺寸。