答案：直接用opacity配合transition即可实现图片透明过渡，无需JS或额外DOM结构；需在常态样式中声明transition和初始opacity值，hover时仅改变opacity，避免混用transform或filter引发渲染问题。
直接用 opacity 配合 transition 就能实现图片透明过渡效果，不需要 JS，也不需要额外 DOM 结构。关键在写法要对，否则会卡顿、闪跳或不生效。
用 opacity + transition 实现 hover 透明过渡
这是最常用也最稳妥的方式，适用于 <img> 标签本身。注意两点：一是必须设 transition 在非 hover 状态下，二是避免同时操作多个属性引发重绘抖动。
-
opacity取值是 0～1 的小数，比如opacity: 0.3表示 30% 不透明（即 70% 透明） -
transition必须写在基础样式里，不能只写在:hover中，否则首次悬停无动画 - 推荐只过渡
opacity，不要加transform或filter一起动，否则某些浏览器（如旧版 Safari）会触发 layout 或降级为软件渲染
.fade-img {
opacity: 1;
transition: opacity 0.4s ease;
}
.fade-img:hover {
opacity: 0.6;
}
为什么 background-color: transparent 对 img 无效
因为 <img> 是替换元素（replaced element），它的视觉内容由外部文件决定。background-color 只作用于“图片未加载”或“图片为空”的占位区域，对已渲染的图像像素完全不起作用。
- 误写
img { background-color: transparent; }→ 页面毫无变化 - 想给图片加遮罩层？得用父容器 +
::before或<div> 绝对定位覆盖 <li>想让图片背景透明？PNG 本身带 Alpha 通道才有效；HTML/CSS 无法“抠掉” JPG 的背景</li> <h3>filter: opacity() 和 opacity 属性的区别</h3> <p>两者都能调透明度，但行为和兼容性不同，混用容易出问题。</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill9972" title="Wechat Article Html"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="Wechat Article Html" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill9972" title="Wechat Article Html" class="overflowclass">Wechat Article Html</a> <p class="overflowclass">将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。</p> </div> <a rel="nofollow" href="/xiazai/skill9972" title="Wechat Article Html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <ul> <li> <code>opacity: 0.5：标准属性，IE9+、所有现代浏览器支持，影响整个元素及其子树（不过<img>没子元素，所以无副作用） -
filter: opacity(50%)：单位是百分比，不是小数；属于filter这个重绘开销更大的属性族；Safari 旧版本有闪烁 bug，部分安卓 WebView 渲染异常 - 二者**不可叠加**：如果同时写了
opacity: 0.8和filter: opacity(60%)，实际效果不是 0.8 × 0.6，而是以 filter 为准（Chrome 表现），但 Firefox 可能取更小值——行为不一致，应避免
透明过渡时文字被拖拽/错位？检查父容器是否用了 transform
如果你发现 hover 时图片边缘发虚、文字轻微偏移，或者过渡过程中出现“撕裂感”，大概率是父元素用了 transform: translateZ(0)、scale(1) 或其他触发硬件加速的写法。
- 这些
transform会让元素进入独立图层，而opacity动画若没同步进该图层，就会产生合成层分离，导致过渡不连贯 - 解决方法：给图片本身也加
will-change: opacity（仅在必要时），或统一把父容器和图片都设为同一合成层（例如都加transform: translateZ(0)） - 但更推荐的做法是——**别乱加不必要的
transform**。纯透明过渡，原生opacity已足够高效
真正容易被忽略的是：opacity 动画在低性能设备上可能掉帧，尤其当页面已有多个同类型动画同时运行时。如果过渡卡顿，优先检查是否过度使用了 transition，而不是急着换 filter 或 JS。简单的事，就用最直白的方式做。
