当前我们使用图像作为复选框使用CSS现在当我单击复选框时，我想隐藏图像并显示背景颜色

#checkbox-container {
  background-color: #f00; /* 设置背景颜色 */
  width: 20px; /* 设置宽度 */
  height: 20px; /* 设置高度 */
}

<div id="checkbox-container">
  <input type="checkbox" id="my-checkbox">
</div>

#my-checkbox {
  opacity: 0; /* 设置透明度为0 */
  position: absolute; /* 设置绝对定位 */
  top: -9999px; /* 将复选框移出可见区域 */
  left: -9999px;
}

#my-checkbox:checked + #checkbox-container {
  background-color: transparent; /* 隐藏背景颜色 */
}

#my-checkbox:checked + #checkbox-container::before {
  content: url('path/to/image.png'); /* 显示图像 */
}