HTML中img标签无法通过颜色代码实现透明，必须依赖CSS的opacity、rgba()遮罩、图片自身Alpha通道或mix-blend-mode混合模式。
HTML 本身没有“透明颜色代码”能直接让 img 标签不接受 background-color 或 color 来控制自身透明度，它的透明效果只能通过 CSS 的 opacity、rgba()（仅适用于遮罩层）、或图片自身带 Alpha 通道（如 PNG）来实现。
用 opacity 快速让整个 img 变透明
这是最直接的方式，作用于整个元素（包括内容、边框、阴影），取值 0～1：
-
opacity: 0→ 完全透明（但依然占文档流，可响应事件） -
opacity: 0.5→ 半透明 - 注意：它会**继承给子元素**，但
img没有子元素，所以无副作用 - 兼容性好（IE9+），移动端也完全支持
img {
opacity: 0.7;
}用 rgba() 给图片加半透明白色/黑色遮罩（不改变原图）
如果你不是想让图片“变淡”，而是想叠加一层可调透明度的色块（比如磨砂效果、hover 高亮），得用定位 + rgba() 覆盖层：
- 必须给
img父容器设position: relative - 用伪元素或空 绝对定位盖在图片上
background-color: rgba(255, 255, 255, 0.3)中的第四个参数就是 alpha 通道值- 这种方式不会影响图片清晰度，且可独立控制遮罩显隐
@@##@@.img-wrapper { position: relative; display: inline-block; } .img-wrapper::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.2); opacity: 0; / 初始隐藏 / transition: opacity 0.3s; } .img-wrapper:hover::after { opacity: 1; }
为什么不能用
background-color: transparent让img透明？因为
img是**替换元素（replaced element）**，它的内容由外部资源（图片文件）决定，background-color只作用于其背景区域（即图片加载失败或为空时才可见）。即使设成transparent，也不会让已加载的图片变透明。立即学习“前端免费学习笔记（深入）”；
- 常见误操作：
img { background-color: transparent; }→ 完全无效 - 如果图片是 JPG（无 Alpha 通道），再怎么设 CSS 也无法让局部（比如背景）透明；必须换 PNG/WebP
- 想实现“抠图透明”，必须图片源文件自带透明通道，CSS 只负责显示它
用
mix-blend-mode做更精细的透明混合（进阶）当需要图片和底层内容产生叠加透明效果（比如文字透出、色彩融合），
mix-blend-mode比单纯opacity更可控：-
mix-blend-mode: multiply/screen/overlay等值会让图片像素与下层内容按规则混合 - 只在图片有 Alpha 通道时效果明显（尤其 PNG 黑白 alpha 图）
- 注意：它依赖父级堆叠上下文，常需配合
isolation: isolate防止意外溢出 - 兼容性稍弱（IE 不支持，iOS Safari 9.3+ 支持）
img { mix-blend-mode: screen; isolation: isolate; }真正决定图片能否“透明”的，第一是图片格式是否含 Alpha 通道（PNG/WebP/AVIF），第二才是 CSS 如何渲染它。别指望用十六进制颜色码（如
#00000000）直接写在img上生效——那只是某些浏览器对background的扩展写法，对img内容无效。
