纯CSS实现原生<img>标签点击放大（无需修改HTML）

需求 #

仅通过CSS实现：

• 点击页面中任意原生<img>标签，图片带平滑缩放过渡效果居中显示
• 页面背景同步变暗
• 点击任意区域（图片/背景/其他页面元素）恢复初始状态
  限制：无法修改HTML结构、不能添加JavaScript代码，仅能控制CSS。

实现方案 #

利用CSS的:focus伪类触发图片放大状态，结合body::before生成暗背景，通过:has()父选择器关联状态，依赖浏览器原生焦点机制实现关闭逻辑。

完整CSS代码 #

/* 基础样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 图片默认样式，确保可点击聚焦 */
img {
  max-width: 100%;
  height: auto;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: zoom-in;
  outline: none; /* 移除默认聚焦轮廓 */
}

/* 图片聚焦后的放大样式 */
img:focus {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  max-width: 90vw;
  max-height: 90vh;
  z-index: 1000;
  cursor: zoom-out;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8);
}

/* 暗背景：默认隐藏 */
body::before {
  content: '';
  position: fixed;
  inset: 0; /* 等同于top/left/right/bottom:0 */
  background-color: rgba(0, 0, 0, 0.75);
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: zoom-out;
}

/* 当页面内存在聚焦的图片时，显示暗背景 */
body:has(img:focus)::before {
  opacity: 1;
  pointer-events: auto;
}

方案说明 #

1. 聚焦触发机制：原生<img>标签默认支持点击聚焦，无需修改HTML即可通过:focus状态触发放大逻辑。
2. 过渡动画：给图片和背景添加缓动过渡，实现平滑的缩放和淡入淡出效果。
3. 关闭逻辑：点击暗背景、其他页面元素或按ESC键，图片会失去焦点，自动恢复初始样式，暗背景同步隐藏。
4. 响应式适配：放大后的图片使用max-width:90vw和max-height:90vh，确保在不同尺寸设备上都能完整显示且不溢出视口。

兼容性说明 #

• 依赖CSS :has()选择器，支持Chrome 105+、Firefox 121+、Safari 15.4+等现代浏览器。
• 若需兼容更旧浏览器，可考虑结合:focus-within替代，但效果略有差异。

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