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

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

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

给 标签加一个类，用 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 会让它们也一起变淡。这时推荐用“容器 + 绝对定位遮罩”的方式：

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

• 用一个
  包住 和文字层
• 给容器设 position: relative
• 把文字层设为 position: absolute，并确保它在图片上方
• 只对 应用 :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，否则宽高无效