HTML中img标签无法通过颜色代码实现透明，必须依赖CSS的opacity、rgba()遮罩、图片自身Alpha通道或mix-blend-mode混合模式。
HTML 本身没有“透明颜色代码”能直接让 <img> 元素变透明——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 - 用伪元素或空
<div>绝对定位盖在图片上 -
background-color: rgba(255, 255, 255, 0.3)中的第四个参数就是 alpha 通道值 - 这种方式不会影响图片清晰度，且可独立控制遮罩显隐
<div class="img-wrapper">
<img src="photo.png" alt="">
</div>
<p>.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; /<em> 初始隐藏 </em>/
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 内容无效。
