opacity影响整个元素及子元素且可继承，filter: opacity()同为全局透明但属滤镜层；2. 两者均无法让子元素脱离透明效果；3. opacity性能更优，适合动画，filter开销大；4. opacity兼容性更好，语法为数值，filter需百分比。优先选opacity做透明动画，filter用于复合滤镜场景。
在CSS中，opacity 和 filter: opacity() 都可以用来控制元素的透明度，但它们在行为、继承和应用场景上有明显区别。了解这些差异有助于在实际开发中做出更合适的选择。
1. 作用范围不同
opacity 影响整个元素及其所有子元素。设置后，元素本身以及内部的文字、图片、背景等都会统一变透明。
filter: opacity() 虽然也改变透明度，但它属于滤镜效果，作用于元素的渲染层，不会像 opacity 那样直接改变元素的层叠上下文透明度，但仍会影响整个元素视觉输出。
例如：
立即学习“前端免费学习笔记（深入）”；
2. 继承与层级影响
opacity 是可继承的视觉属性，子元素无法通过设置 opacity: 1 来“恢复”完全不透明。父级的透明度会叠加影响子元素。
filter 不是传统意义上的可继承属性，但其效果作用于整个渲染盒子，包括后代元素的合成结果。因此，子元素也无法避免被“过滤”。
两者都不能让子元素脱离透明效果，这是它们共有的限制。
3. 性能与硬件加速
opacity 改变时，浏览器可能触发合成层提升，适合做动画，性能较好。常用于淡入淡出过渡效果。
filter 属于更复杂的图形处理，尤其是当与其他滤镜（如 blur）组合使用时，计算开销更大。单独使用 filter: opacity() 动画性能略低于 opacity。
建议：如果只是做透明度动画，优先使用 opacity。
4. 兼容性与语法差异
opacity 支持所有现代浏览器，包括较老版本IE（IE9+），语法简单：opacity: 0.5;
filter: opacity() 是 filter 函数的一部分，语法为百分比：filter: opacity(50%);，需注意单位差异。
旧版IE不支持 filter 函数语法，移动端和现代浏览器支持良好。
基本上就这些。虽然两者视觉效果相似，但 opacity 更轻量、更适合动画；filter: opacity() 更适合与其他滤镜组合使用。选择哪个取决于具体需求和性能考量。
