iframe元素不继承父级filter，因其内容属独立文档上下文；同源时可js注入样式，跨域则完全不可控，唯一可靠方式是在其内部html中直接设置filter。
iframe 元素本身不继承父级 filter，直接加无效
很多人给 body 或 html 加 filter: grayscale(100%) 后发现 iframe 仍是彩色的——这不是 bug，是规范行为。iframe 内容属于独立文档上下文，父页面的 CSS 滤镜不会穿透进去。
必须在 iframe 内部文档中设置 filter
真正生效的方式只有一种：把 filter: grayscale(100%) 写进 iframe 所加载的 HTML 页面里，作用于它的根元素或目标容器。
- 如果 iframe 是同源的，可以用 JS 注入样式：
iframe.contentDocument.documentElement.style.filter = 'grayscale(100%)' - 如果 iframe 是跨域的，无法访问其 DOM，此时 CSS 滤镜完全不可控
- 哪怕只是嵌入一个 YouTube 视频或地图，也别指望靠外层样式变灰——它们都受同源策略和渲染隔离保护
用 wrapper + backdrop-filter 做视觉模拟（仅限部分场景）
当无法控制 iframe 内容时，有人尝试用 backdrop-filter: grayscale(100%) 盖一层蒙版。但注意：
-
backdrop-filter只对“背景区域”起作用，iframe 本身是不透明块级元素，没有可滤的“背后内容” - 某些浏览器（如 Safari）会把 iframe 当作合成层，
backdrop-filter对它完全无反应 - 真要模拟，得用半透
div叠在 iframe 上，再配合mix-blend-mode: luminosity，但效果极不稳定，且会遮挡交互
替代方案：服务端代理或预处理静态资源
如果你能控制 iframe 的来源，最可靠的做法是：
- 让后端返回的 HTML 已带
html { filter: grayscale(100%) }样式 - 如果是自己托管的静态页，直接在
里内联该规则 - 避免依赖 JS 动态注入，因为 iframe
load事件时机难把握，容易漏帧或闪屏
真正卡住的点从来不是“怎么写那行 grayscale”，而是 iframe 的跨域边界和渲染隔离——这些限制没法绕开，只能提前确认来源是否可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
