如何根据容器背景色变化动态设置对应区域的文字颜色

核心思路 #

不用手动计算文字位置、不用拆分文字层做遮罩，直接用CSS mix-blend-mode: difference 混合模式实现自动反色：绿色填充区域内文字自动显示白色，未填充区域文字自动显示和浅底色高对比度的深色，适配任意长度的动态文本、任意百分比值，没有额外JS计算成本。
别用两层文字错位叠加的老方案，文本长度一变就容易错位，维护成本极高。

完整实现代码 #

结构部分 #

<div class="progress-container">
  <!-- 绿色填充层，宽度通过JS动态绑定百分比 -->
  <div class="progress-fill"></div>
  <!-- 文本层，内容从API动态注入 -->
  <div class="progress-content">
    <span class="text-label"></span>
    <span class="text-percent"></span>
  </div>
</div>

样式部分 #

.progress-container {
  position: relative;
  width: 100%;
  height: 44px;
  border-radius: 8px;
  background: #f0f0f0; /* 未填充区域底色 */
  overflow: hidden;
  display: flex;
  align-items: center;
  isolation: isolate; /* 隔离混合模式，不影响外部元素 */
}

.progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: #16a34a; /* 填充用绿色 */
  transition: width 0.2s ease; /* 进度变化加平滑动画 */
}

.progress-content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 0 16px;
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  mix-blend-mode: difference; /* 核心属性，实现自动反色 */
}

动态数据对接逻辑 #

// 对接API获取进度数据
async function updateProgress() {
  // 替换为实际接口地址
  const response = await fetch('/api/get-task-progress')
  const { content, percent } = await response.json()

  // 更新填充宽度
  document.querySelector('.progress-fill').style.width = `${percent}%`
  // 更新文本内容
  document.querySelector('.text-label').textContent = content
  document.querySelector('.text-percent').textContent = `${percent}%`
}

// 初始化调用，轮询更新进度可加setInterval定时触发
updateProgress()

注意事项 #

容器不要加opacity类透明度属性，会干扰混合模式的颜色计算；如果需要做圆角，只需要给外层容器加border-radius配合overflow: hidden即可，内层填充层不需要重复设置圆角。

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