Blend Invert

往下滚,别管顶栏

顶栏是同一个白色元素,从头到尾没有换过 class。背景变什么色,它自己反过来。

深色区块

白 × 黑底 = 保持白。常规做法要 JS 监听滚动加 .is-dark,这里零 JS。

高饱和品牌色

反色出来的是补色,不是黑——这是 difference 的正常行为,不是 bug。

图像 / 渐变背景

混合对象是下方所有内容,视频和 canvas 一样算。左边这个词用的是同一招的行内版。

失效区:中灰

背景 #808080|128−255| = 127,输出还是中灰。

顶栏在这一屏基本看不见 —— 这是本效果不可回避的硬伤,灰底页面别用

不生效的最常见原因

这一节的容器加了 isolation: isolate。顶栏被切出层叠上下文,退化成普通白色。
父级带 opacity<1 / transform / filter 也是同样结果。

demo 的配色排版是占位 —— 抄机制,不抄样式(库规范铁律 6)