用CSS opacity配合:hover可实现图片悬停变淡效果，基础写法为设置opacity和transition，进阶需容器定位隔离文字，兼容IE需补充filter属性。

用 CSS 的 opacity 配合 :hover 就能轻松实现，不需要 JavaScript。

基础写法：直接改图片透明度

给 <img alt="HTML怎么让图片在鼠标经过时变得半透明" > 标签加一个类，用 opacity 控制透明程度，再用 transition 让变化更平滑：

• 默认设 opacity: 1（完全不透明）
• 鼠标悬停时设 opacity: 0.6（40% 透明）
• 加上 transition: opacity 0.3s，避免突兀闪烁

示例代码：

.fade-img {
  opacity: 1;
  transition: opacity 0.3s ease;
}
.fade-img:hover {
  opacity: 0.6;
}

进阶需求：只让图片变淡，文字/图标不受影响

如果图片上还叠着文字、按钮等元素，直接改 img 的 opacity 会让它们也一起变淡。这时推荐用“容器 + 绝对定位遮罩”的方式：

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

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

• 用一个 <div> 包住 <code><img alt="HTML怎么让图片在鼠标经过时变得半透明" > 和文字层
• 给容器设 position: relative
• 把文字层设为 position: absolute，并确保它在图片上方
• 只对 <img alt="HTML怎么让图片在鼠标经过时变得半透明" > 应用 :hover 透明变化

兼容旧浏览器（如 IE8 及以下）

如果还需支持老版本 IE，可以补充 filter 属性：

.fade-img {
  opacity: 0.6;
  filter: alpha(opacity=60); /* IE8 及更早 */
}

注意：filter 的取值是 0–100，和 opacity 的 0–1 不同，别写反。

常见问题提醒

• 没加 transition → 效果生硬，建议始终加上
• 给父容器忘了设 position: relative → 后续做遮罩时定位会错乱
• 误用 display: none 实现隐藏 → 会破坏布局流，且无过渡效果
• 在链接中直接写 a:hover img → 要确认 a 是块级或已设 display: block，否则宽高无效