← 全部效果

跟随背景自动反色

悬浮元素（悬浮球、固定标签、滚动徽章）划过明暗不同的背景时自动反色：亮底上变黑、暗底上变白，滚动时连续过渡而不是到某条线突然硬切。这是 Auto Contrast 的经典手法，让悬浮 UI 在任何背景上都保持可读。

实时 Demo

浅色区徽章在此显示为深色

深色区划过来自动变浅色

中间调灰底上同样清晰

品牌色区彩底也能自动取反

再来一次深色回滚同样可逆

浅色收尾滚回去看连续过渡

READABLE我永远和背景保持最大对比度

↑ 上下滚动，看悬浮徽章在明暗背景间自动反转

调参台拖动滑杆实时改手感，提示词同步更新

效果拆解

difference 混合：一层白色描边 + 白色文字，配 mix-blend-mode: difference——底是亮色时差值趋黑、底是暗色时差值趋白，零 JS 就能在任何背景上自动反色，彩色底会得到反色后的补色。
亮度阈值方案：需要精确控制切换点时用 JS 方案——读取元素背后区域的平均亮度（Canvas 采样或按背景类名推断），低于阈值给深色样式、高于给浅色，中间加过渡带防抖动。
连续过渡：硬切发生在「样式离散、位置连续」时。把切换量做成亮度 b 的连续函数（如 color-mix 或 opacity 插值），滚动时颜色跟着亮度走，就不会出现跳变。
sticky 定位：悬浮元素用 position: sticky 挂在滚动容器内，天然跟随内容滚动又保持悬浮，比 fixed + JS 算偏移更省事，混合同样生效。

AI 提示词

用现代前端技术实现跟随背景自动反色（Auto Contrast）：滚动容器内的悬浮徽章（position: sticky）在明暗背景间自动反转颜色。方案 A（默认）：白色描边+白色文字 + mix-blend-mode: difference，零 JS 适配任意背景，彩色底得补色。方案 B（${v.mode}）：JS 按背后区域平均亮度切换——亮度低于阈值 ${v.th} 时用浅色样式、高于用深色样式，切换量做成亮度的连续函数（color-mix 按 |亮度-0.5|×2 插值），滚动过渡平滑无硬切，过渡带内防抖动。要求：回滚可逆；rAF 节流；徽章 pointer-events: none 不挡内容。

参数可调：方案选择 mode（纯 CSS difference / JS 亮度阈值）、切换阈值 th（0-1，多暗才算「深背景」）。
注意：mix-blend-mode 会被中间层叠上下文隔离，悬浮元素与背景必须同属一个 stacking context；需要兼顾半透明背景时优先 JS 采样方案。