opacity适用于无子内容的独立图片，但会使子元素一同变透明；背景图调透明度应使用rgba()遮罩或::before伪元素；filter: opacity()因兼容性和渲染问题不推荐单独使用。
opacity 是最直接、兼容性最好、也最容易出错的方式——它确实能让图片变透明，但会连带把图片里所有子内容（比如 img 标签内部的文字、图标、伪元素）一起变淡。而网页中绝大多数“调透明度”的真实需求，其实是：**只让图变淡，文字/按钮/覆盖层保持清晰**。所以不能无脑套 opacity。
用 opacity 控制 <img> 标签本身
适用于独立图片、无叠加内容、且不需要 hover 动态变化的简单场景。
-
opacity取值是0到1的小数，不是百分比；filter: opacity(70%)才是百分比写法，但兼容性差、可能模糊边缘 - 别在父容器上设
opacity然后指望只影响图片——子元素无法通过opacity: 1拉回来 - 若需过渡动画，必须加
transition: opacity 0.3s，否则变化生硬 - IE8 及更早需补
filter: alpha(opacity=50)，现代项目可忽略
示例：
<img src="photo.jpg" alt="风景" style="max-width:90%">
背景图怎么单独调透明度？别碰 opacity 容器
这是最高频踩坑点：给 div 加 background-image 后再设 opacity: 0.5，结果文字也发虚、表单控件半透明、hover 失效。
- 真正有效的方案只有两个：
rgba()遮罩层 或::before伪元素 -
rgba()更轻量，适合静态背景：用background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url(bg.jpg)，alpha 值越小越透 -
::before更可控，适合需要 hover 渐变、多图层或固定背景的场景；必须设content: ""和z-index: -1，否则不渲染或盖住内容 - 别用
background-color: rgba(...)单独写——会直接覆盖掉background-image
动态控制透明度？优先用 JS 改 style.opacity
如果透明度要响应用户操作（如滑块拖动、按钮切换），JS 操作最可靠。
- 直接改
element.style.opacity = "0.4"，比 class 切换更即时、无 CSS 重排开销 - 注意：JS 设置的是内联样式，会覆盖 CSS 中的
opacity，但不会覆盖filter: opacity() - 若同时用了
transition，JS 修改也会触发动画，无需额外处理 - 避免频繁读取
getComputedStyle(el).opacity，性能较差；可用 data 属性缓存当前值
为什么 filter: opacity() 不推荐作为主方案？
它看起来和 opacity 一样，但底层机制不同：触发硬件加速、可能重绘整层、在部分 Safari 和旧 Edge 中导致文字锯齿或闪烁。
-
filter会影响整个渲染层，包括 border、box-shadow，甚至伪元素的渐变 - 不能和
transform: scale()同时高效使用（会创建多个合成层） - 调试时难以定位：Chrome DevTools 的 Computed 面板里，
filter的透明度不显示为 “opacity”，容易漏看 - 除非你已经在用
filter做其他效果（如blur(2px)），否则没必要为透明度单独引入
<img> 标签、背景图、还是带文字的图文卡片？每个场景对应不同的隔离层级逻辑。最容易被忽略的是：伪元素方案里忘记写 content: ""，或者遮罩层没设 background-blend-mode: overlay 导致颜色死黑——这些细节不试一遍根本看不出问题。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
