直接用opacity会使整个渲染节点及其后代（包括文字、边框等）同步变淡，无法单独控制背景图透明度；正确方案是用伪元素承载背景图并设opacity，或用filter: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完全不支持（已淘汰） - 性能影响：频繁动画时，
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 属性：
立即学习“前端免费学习笔记（深入）”；
- 容器里有可点击的
<button>，且要求:hover时文字清晰可见 - 图片是
background-image，但上面叠加了标题、说明文字或操作按钮 - 需要和
backdrop-filter（如毛玻璃效果）共存，opacity会干扰其渲染层级 - 做响应式 banner，不同断点下要分别控制图层与文字的显隐/透明度
最易被忽略的是：opacity 会关闭 pointer-events 的传播链，导致子元素 hover 失效——这不是 bug，是规范行为，但常被误判为 CSS 写错了。
