最快方式是直接在标签用opacity，但会整体透明；rgba()不适用于；png自身alpha不可调；canvas可逐像素控透明但失原生特性；svg支持opacity动画但有cors和缩放限制。
用 opacity 最快但影响整个元素
直接在 <img alt="HTML5怎样调整图片透明度_HTML5调整图片透明度技巧【视觉】" > 标签上加 style="max-width:90%" 是最简方式，但要注意：它会让图片及其所有后代（比如叠加的 <span></span> 文字）一起变透明。如果图片是独立展示、无子内容，这完全够用。
常见错误是以为 opacity 只作用于图片像素——其实它是 CSS 渲染层的“整体蒙版”，连边框、阴影、伪元素都会被削弱。
@@##@@
rgba() 背景图才适用，<img src="logo.png" style="max-width:90%" alt="HTML5怎样调整图片透明度_HTML5调整图片透明度技巧【视觉】" > 不支持
有人试过把 background-image: url(...) 配合 background-color: rgba(255,255,255,0.3) 混合出半透效果，但这只是背景色叠加，并非图片本身透明。真正想调图片像素级透明度，<img alt="HTML5怎样调整图片透明度_HTML5调整图片透明度技巧【视觉】" > 元素不接受 rgba() 作为透明控制手段。
-
background-image+rgba()背景色 → 只影响背景层混合，不是图片 alpha 通道 -
<img alt="HTML5怎样调整图片透明度_HTML5调整图片透明度技巧【视觉】" >的src图像若本身带 alpha（如 PNG），浏览器会原生渲染其透明区域，但无法用 CSS 单独调节该 alpha 值 - 想动态改 PNG 的 alpha 通道？必须走 Canvas 或 WebGL
Canvas 是唯一能逐像素控透明度的方式
当需要对某张图片做「局部淡入」「渐变透明」或「和另一图层 alpha 混合」时，<canvas></canvas> 是绕不开的方案。核心是用 globalAlpha 控制绘制时的默认透明度，或用 getImageData/putImageData 手动改每个像素的 alpha 值。
立即学习“前端免费学习笔记（深入）”；
注意：Canvas 绘制后，图像就脱离了 HTML 流，响应式缩放、SEO、右键保存等原生 <img alt="HTML5怎样调整图片透明度_HTML5调整图片透明度技巧【视觉】" > 行为会丢失。
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.onload = () => {
ctx.globalAlpha = 0.8; // 所有后续绘制都带此透明度
ctx.drawImage(img, 0, 0);
};
img.src = 'photo.png';
SVG <image></image> 支持 opacity 且可动画
如果图片嵌在 SVG 里（用 <image href="..." opacity="0.4"></image>），opacity 行为和 HTML 中一致，但优势在于：可配合 <animate></animate> 做平滑透明度变化，且不会触发重排（reflow），性能比 JS 改 DOM 更稳。
限制也很明显：SVG <image></image> 不支持 CORS 图片（除非服务端配 Access-Control-Allow-Origin），且不能响应式缩放（需手动设 preserveAspectRatio）。
<svg width="200" height="150"> <image href="icon.svg" x="0" y="0" width="200" height="150" opacity="0.5"/> </svg>Canvas 处理透明度时容易忽略图像跨域问题，哪怕本地开发用
file:// 协议打开也会触发 SecurityError；真要调试，得用 python3 -m http.server 启个本地服务。
