最简单可靠的方式是直接给<img>元素设置opacity属性，现代浏览器（IE9+等）均支持；opacity专为控制整体不透明度设计，取值0~1，不影响布局和事件，但opacity:0仍可交互，需配合pointer-events:none彻底隐藏。
直接给 <img> 元素加 opacity 是最简单、最可靠的方式，现代浏览器（IE9+、Chrome、Firefox、Safari、Edge）全部支持，无需 hack。
用 opacity 设置 <img> 初始透明度
opacity 是专为控制元素整体不透明度设计的 CSS 属性，对 <img> 这类无子内容的替换元素尤其干净——没有继承污染问题，也不影响布局或事件响应。
-
opacity: 0.6表示 60% 不透明（即 40% 透明），取值范围严格是0（全透）到1（全不透），不能写成60%或60 - 可写在内联样式里：
<img src="a.jpg" style="opacity: 0.7;">，也可写在 CSS 类中：.faded { opacity: 0.4; } -
<img>没有子元素，所以不会出现“子元素被意外变透”的问题，这点和给<div>设opacity完全不同 - 注意：
opacity: 0的图片仍占据文档流、能响应click或hover，如需彻底隐藏且不可交互，得额外加pointer-events: none
为什么不用 filter: opacity()？
filter: opacity(70%) 看似等价，但实际有明显差异：
- 单位不同：
filter接受百分比（70%），opacity接受小数（0.7），混用会失效 - 性能开销更大：
filter强制触发图层合成和重绘，滚动或动画时更容易掉帧 - 兼容性略差：iOS Safari 13.3 之前、旧版 Android WebView 对
filter支持不稳定，而opacity在 IE9 就已稳定 - 调试困难：当同时存在
opacity和filter: opacity()，后者会覆盖前者，但开发者工具里不易察觉
常见误操作：试图用 background-color 或 transparent
<img> 是替换元素，它的视觉内容来自外部文件，background-color 只在图片加载失败、为空或使用 object-fit 留白时才可见。因此以下写法完全无效：
立即学习“前端免费学习笔记（深入）”；
img { background-color: transparent; }
img { background-color: rgba(255, 255, 255, 0.5); }
这些设置不会让已加载的 JPG/PNG 变透明，只会掩盖加载异常——别被表面效果误导。
真正要控制图片本身明暗程度，就只用 opacity；如果目标是“背景图 + 文字不透明”，那得换结构（比如伪元素承载背景），而不是在 <img> 上硬套颜色函数。
