display:none 是最直接可靠的方式，能让图片彻底从布局中消失、不占空间、不响应事件、不影响排版；visibility:hidden 仅隐藏视觉但保留占位和交互；opacity:0 虽透明却仍可点击、聚焦、触发事件且影响可访问性。
display:none 是最直接、最可靠的方式，能真正让图片从布局中消失，不占空间、不响应事件、不影响后续元素排版。
为什么不用 visibility:hidden 隐藏图片
它会让图片“隐形但仍在原位”——父容器高度不会收缩，周围元素不会上移，甚至可能意外触发点击（如果没加 pointer-events: none）。比如你用它隐藏一个轮播图的某张图，getBoundingClientRect() 仍返回非零尺寸，JS 判断图片是否“在视口内”会出错。
-
visibility:hidden的子元素默认继承隐藏状态，但你可以用visibility:visible单独恢复某个子节点——这对图片几乎无意义，因为<img alt="HTML怎么隐藏网页图片_使用代码暂时不显示图片【常用】" >没有可操作的子元素 - 它不触发重排（reflow），只触发重绘（repaint），性能略好，但对单张图片几乎感知不到
- 如果你正做渐隐动画，别单独用它；应配合
opacity+transition
opacity:0 看似隐藏，实则危险
图片变透明了，但依然占据空间、能被点击、能获取焦点、屏幕阅读器仍会读出 alt 文本。更麻烦的是：如果图片绑定了 click 或 load 事件，这些监听器照常工作，容易引发意料外的行为。
- 适合做淡入淡出过渡，比如
img.fade-out { opacity: 0; transition: opacity 0.2s; } - 绝对不要用它替代视觉隐藏——比如管理后台里“隐藏操作按钮”，用户仍能 tab 进去并回车触发
-
opacity会影响整个元素及其所有后代，无法局部控制
JavaScript 动态控制时，别写错属性名
常见错误是把 display 写成 visible 或 disvisible，或者拼错 DOM 方法名：
立即学习“前端免费学习笔记（深入）”；
- ❌
el.style.display = "visible"——display没有visible值，这是visibility的值 - ❌
document.getElementByld("pic")—— 少了个e，正确是getElementById - ✅ 推荐写法：
document.getElementById("pic").style.display = "none" - ✅ 更稳妥的 JS 控制：
el.hidden = true（HTML5 原生属性，语义清晰，兼容性到 IE8+）
真正要“暂时不显示”，核心就一条：用 display:none。其他方式要么留空位、要么留交互、要么留隐患——尤其是 opacity:0，表面安静，背地里全是事件和可访问性陷阱。
