如何还原父元素filter: invert(0.85)下图片的反转效果？

我完全懂你碰到的这个坑——当父元素套了个非100%的反转滤镜时，直接给图片加invert(1)根本没法完全还原，因为CSS滤镜的叠加是基于颜色通道的数学计算，不是简单的“反向开关”就能搞定的。

核心原理与正确的滤镜值 #

要抵消父级filter: invert(0.85)的效果，我们得用数学公式算出精准的反转比例。根据CSS滤镜的叠加规则，如果父级用了invert(a)，子元素需要设置的反转值b得满足这个公式：

b = a / (2a - 1)

把a=0.85（也就是85%）代进去算：

b = 0.85 / (2*0.85 - 1) = 0.85 / 0.7 ≈ 1.214（换算成百分比就是121.4%）

直接能用的代码示例 #

假设你的HTML结构是这样的：

<div class="parent-container">
  <img src="your-image-path.jpg" alt="需要还原的图片" class="restored-img">
</div>

对应的CSS写法：

.parent-container {
  filter: invert(0.85);
  /* 父元素的其他样式 */
}

.restored-img {
  /* 用计算出的121.4%抵消父级的反转效果 */
  filter: invert(121.4%);
}

这么设置之后，图片就能完美还原到原本的颜色了。

额外小提示 #

• 这个公式适用于所有非0.5的父级反转值（如果a=0.5，分母会变成0，这种情况没法用单一invert抵消，不过0.5的反转场景其实很少见）
• 如果父元素还加了其他滤镜（比如brightness、contrast），你得在子元素的filter里按相反顺序抵消那些效果才行

内容的提问来源于stack exchange，提问作者Zenoo