filter 属性不支持 opacity() 函数，该写法无效且被浏览器忽略；应使用 opacity 属性控制整体透明度，或 rgba() 控制颜色通道透明度。
filter 里用 opacity() 不起作用？那是用错了地方
HTML5 本身没有叫“透明度滤镜”的独立功能，filter 属性里的 opacity() 函数在绝大多数浏览器中根本不存在（Chrome/Firefox/Safari 均不支持）。你看到的“透明度效果”，实际应通过 opacity CSS 属性或 rgba() 颜色值实现，而非 filter。
真正能调透明度的两个可靠方式
想让元素变透明，只有这两个路径被广泛支持且行为稳定：
-
opacity: 0.6—— 作用于整个元素（含子元素），取值范围0到1 -
background-color: rgba(255, 255, 255, 0.6)或color: rgba(0, 0, 0, 0.4)—— 只影响对应颜色通道，不影响子元素
注意：filter: opacity(60%) 是无效写法，会直接被浏览器忽略；CSS 规范里从未定义过该函数。
为什么有人误以为 filter 支持透明度？
常见混淆来源有三个：
立即学习“前端免费学习笔记（深入）”；
- 把 SVG 的
filter - 看到某些旧版实验性 WebKit 内核曾短暂支持过
opacity()，但早已废弃 - 将
filter: blur(2px) brightness(1.2)这类有效组合，错误推断出也能加opacity()
当前所有主流浏览器对 filter 支持的函数只有：blur()、brightness()、contrast()、grayscale()、hue-rotate()、invert()、opacity()（⚠️这个是假的，别信）、saturate()、sepia() 等——唯独没有真正的透明度控制。
需要混合模式+透明度？用 mix-blend-mode + opacity 组合
如果目标是“背景穿透+内容半透”这种视觉混合效果，正确解法是：
- 给元素设
opacity: 0.7控制自身透明度 - 同时加
mix-blend-mode: multiply（或其他如screen、overlay）实现与下层内容的颜色混合 - 确保父容器没设置
isolation: isolate，否则会切断混合链
例如：
.blend-box { opacity: 0.8; mix-blend-mode: screen; } 这才是现代 HTML/CSS 中可控、可预测的透明+混合方案。
别在 filter 上浪费时间找透明度开关——它本来就没有。关键在于分清“元素整体透明”“局部颜色透明”和“图层混合”这三件事各自该走哪条路。
