最快方式是直接在标签用opacity，但会整体透明；rgba()不适用于；PNG自身alpha不可调；Canvas可逐像素控透明但失原生特性；SVG支持opacity动画但有CORS和缩放限制。
用 opacity 最快但影响整个元素
直接在 style="max-width:90%" 是最简方式，但要注意：它会让图片及其所有后代（比如叠加的 文字）一起变透明。如果图片是独立展示、无子内容，这完全够用。
常见错误是以为 opacity 只作用于图片像素——其实它是 CSS 渲染层的“整体蒙版”，连边框、阴影、伪元素都会被削弱。
@@##@@
rgba() 背景图才适用，
有人试过把 background-image: url(...) 配合 background-color: rgba(255,255,255,0.3) 混合出半透效果，但这只是背景色叠加，并非图片本身透明。真正想调图片像素级透明度，rgba() 作为透明控制手段。
-
background-image+rgba()背景色 → 只影响背景层混合，不是图片 alpha 通道 -
src图像若本身带 alpha（如 PNG），浏览器会原生渲染其透明区域，但无法用 CSS 单独调节该 alpha 值 - 想动态改 PNG 的 alpha 通道？必须走 Canvas 或 WebGL
Canvas 是唯一能逐像素控透明度的方式
当需要对某张图片做「局部淡入」「渐变透明」或「和另一图层 alpha 混合」时， 是绕不开的方案。核心是用 globalAlpha 控制绘制时的默认透明度，或用 getImageData/putImageData 手动改每个像素的 alpha 值。
立即学习“前端免费学习笔记（深入）”；
注意：Canvas 绘制后，图像就脱离了 HTML 流，响应式缩放、SEO、右键保存等原生
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 opacity 且可动画
如果图片嵌在 SVG 里（用 opacity 行为和 HTML 中一致，但优势在于：可配合
限制也很明显：SVG Access-Control-Allow-Origin），且不能响应式缩放（需手动设 preserveAspectRatio）。
file:// 协议打开也会触发 SecurityError；真要调试，得用 python3 -m http.server 启个本地服务。
