为何为body添加filter属性后background-image未按预期反转?
关于body元素filter滤镜对背景图无效的规范探讨
测试场景
- 基础实现:分别为
<body>和.box元素设置background-image,<body>节点下包含一个<img>子元素 - 为
.box添加filter: invert(1)后,其背景图成功反转,验证了滤镜效果可作用于元素背景图 - 为
<body>添加相同的filter: invert(1)属性后,它的background-image并未按预期反转
核心问题
根据《Filter Effects Module Level 1》规范中「滤镜效果会在其他CSS效果之后应用,且滤镜操作会作用于元素的内容、背景等所有绘制部分」的定义,提出以下两个问题:
- 上述
<body>滤镜对背景图无效的情况是否符合规范?W3C规范中哪部分内容描述了该行为? - 若该行为不符合规范,浏览器厂商是否已发现此bug?
注:此问题仅聚焦规范层面的探讨,无需提供解决方案。
内容的提问来源于stack exchange,提问作者desertpureolive
相关产品推荐
相关产品推荐

