直接用 opacity 最快但会连带文字边框变淡；只调图本身需用 filter: opacity() 或伪元素方案，因 opacity 作用于整个节点及后代，不可被子元素逆转。
直接用 opacity 最快，但会连带文字、边框一起变淡；真要只调图本身、文字保持清晰，得用 filter: opacity() 或伪元素方案。
img 标签直接加 opacity 为什么文字也变透明了
因为 opacity 作用于整个渲染节点及其所有后代——哪怕你只写在 <img> 上，它没有子元素，但一旦图片被包裹在 <div> 里，而你给这个 <div> 设了 opacity: 0.6，里面所有内容（文字、按钮、图标）都会同步变淡。
- 现象：文字发灰、表单控件半透明、hover 动画失效
- 原因：
opacity不可继承逆转，子元素无法用opacity: 1拉回来 - 适用场景：整块区域需要统一降噪，比如模态框遮罩层
- 不适用场景：背景图+前景文字组合、图文卡片、带交互的 banner
filter: opacity() 和 opacity 属性的区别
filter: opacity() 看起来和 opacity 效果一样，但底层行为不同：它是图形处理级操作，不影响层叠上下文和 pointer-events，且支持动画更稳定。
- 单位不同：
opacity: 0.7是小数，filter: opacity(70%)是百分比 - 兼容性：Chrome/Firefox/Safari/Edge 全支持，IE 完全不支持（IE 已淘汰）
- 性能影响：频繁动画时，
filter触发 GPU 加速，比opacity更流畅 - 注意点：如果同时用了其他
filter（如blur(2px)），必须合并写，不能分开声明
示例：<img src="a.jpg" style="filter: opacity(60%) blur(1px);">
立即学习“前端免费学习笔记（深入）”；
背景图怎么单独调透明度而不影响文字
背景图本身不支持透明度参数，background-image: url(x.jpg) opacity(0.5) 是无效写法。真正能隔离控制的只有两种方式：
- 用
::before伪元素承载图片并设opacity，再用z-index: -1垫底——文字完全不受影响 - 用多层
background叠加：background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url(x.jpg)，靠半透色块模拟“图变淡”效果 - 别用
background-color: rgba(...)单独写，否则会覆盖掉background-image - 若页面可滚动，伪元素方案记得加
background-attachment: fixed防止背景滑动错位
哪些情况必须放弃 opacity 改用其他方案
当你遇到以下任一条件，就该立刻停用 opacity 属性：
- 容器里有可点击的
<a>或<button>，且要求 hover 时文字清晰可见 - 图片是
background-image，但上面叠加了标题、说明文字或操作按钮 - 需要和
backdrop-filter（如毛玻璃效果）共存，opacity会干扰其渲染层级 - 做响应式 banner，不同断点下要分别控制图层与文字的显示优先级
这时候，伪元素 + opacity 或 filter 组合才是稳定解——多写几行 CSS，换来的是布局不崩、交互不卡、上线不返工。
