如何仅用CSS而非JS实现点击切换图片src属性

CSS没办法直接修改<img>标签的src属性——毕竟CSS负责样式渲染，不能改动HTML元素的属性值。不过可以用几种替代方案实现点击切换图片的视觉效果：

方案1：用容器的背景图切换 #

把图片放到一个容器（比如<div>）里，通过background-image切换：

<div class="clickable-image"></div>

.clickable-image {
  width: 300px;
  height: 200px;
  /* 默认显示的图片 */
  background-image: url("default-image.jpg");
  background-size: cover;
  background-position: center;
  cursor: pointer;
}

/* 点击时切换背景图 */
.clickable-image:active {
  background-image: url("active-image.jpg");
}

方案2：双图片叠加切换 #

用两个<img>标签叠加，通过opacity控制显示状态：

<div class="img-container">
  <img src="default-image.jpg" alt="默认图" class="base-img">
  <img src="active-image.jpg" alt="点击图" class="hover-img">
</div>

.img-container {
  position: relative;
  width: 300px;
  height: 200px;
  cursor: pointer;
}

.img-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 默认隐藏点击时的图片 */
.hover-img {
  opacity: 0;
  transition: opacity 0.2s ease; /* 可选：添加过渡动画 */
}

/* 容器被点击时，显示点击图 */
.img-container:active .hover-img {
  opacity: 1;
}

注意：如果你坚持要用单个<img>标签，纯CSS是做不到修改它的src属性的，只能用上面的替代方案来实现相同的视觉效果。

内容的提问来源于stack exchange，提问作者Vishnupriya