如何仅用 CSS 实现点击切换图片（无需 JavaScript）

本文介绍一种纯 css 方案，利用 content 属性配合 :active 伪类实现点击时临时替换图片，同时说明其局限性、可访问性风险及替代建议。

在标准 Web 开发中，css 本身无法真正修改 html 元素的 src 属性值——因为 src 是 dom 属性，而纯 CSS 不具备操作 DOM 的能力。但借助 content 属性的元素替换（element replacement）机制，我们可以对 标签实现视觉层面的“切换”效果。

✅ 可行方案：使用 content: url(…) 替换图像

该方法仅适用于无内容流依赖的装饰性图片，且需满足以下前提：

• 元素必须是 display: inline 或 inline-block（ 默认符合）；
• content 属性仅对 ::before/::after 伪元素及部分可替换元素（如 ）在特定上下文中生效（现代浏览器支持 直接使用 content 替换其原始 src）；
• :active 伪类仅在鼠标按下（或触控开始）期间生效，松开即恢复原图——它表示“正在被激活”，而非“已切换状态”。

示例代码如下：

@@##@@

.clickable-img:active {   content: url(https://placekitten.com/200/200); }

⚠️ 注意：此写法在 chrome、edge 和 safari（最新版）中有效；firefox 不支持对 直接使用 content（会忽略），因此不具备跨浏览器一致性。

❌ 重要限制与风险

• 不可访问性（accessibility）问题：
  content 替换的内容*不会更新 alt 文本、`aria-` 属性，也无法被屏幕阅读器识别**。若图片承载关键信息（如图标含义、状态指示），此方案将导致信息丢失，违反 WCAG 2.1 原则，甚至可能触及《无障碍法案》（如 ADA、EN 301 549）合规要求。

  立即学习“Java免费学习笔记（深入）”；

• 无持久状态：
  :active 是瞬态伪类，无法实现“点击后保持新图片”的交互逻辑（如开关式切换）。如需持久状态，必须引入 js 或借助 + label + :checked 的 CSS Hack（见下文延伸方案）。

• 语义与 seo 影响：
  搜索引擎和爬虫仅解析原始 src 和 alt，不会感知 content 替换内容，可能导致图文语义脱节。

✅ 更健壮的纯 CSS 替代思路（推荐）

若目标是“点击切换并保持状态”，可采用隐藏复选框 + :checked + label 包裹的经典模式，完全不依赖 JS：

    @@##@@   @@##@@ 

.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .img-active { display: none; } #toggle-img:checked + label .img-default { display: none; } #toggle-img:checked + label .img-active { display: inline; }

✅ 优势：

• 支持键盘聚焦（ 可聚焦）、空格/回车触发；
• 状态持久（checked 可通过 :checked 精确控制）；
• 保留语义结构与可访问性（alt 仍有效，屏幕阅读器可读取当前可见图）；
• 兼容所有现代浏览器。

总结

• img:active { content: url(…) } 是一种实验性、瞬态、低兼容性的视觉覆盖技巧，不推荐用于生产环境的关键功能；
• 若追求纯 CSS 交互且需可访问性与状态管理，请优先采用 + label + :checked 组合方案；
• 对于复杂交互（如多图轮播、状态联动），应坦然使用轻量 JS（如 addEventListener 切换 src），以保障健壮性、可维护性与合规性。