如何根据背景色设置文本颜色？自定义指定颜色规则实现方法

你可以通过以下两种精准方案替代mix-blend-mode和filter的组合，直接控制文本在不同背景下的目标颜色：

方法1：CSS变量 + JavaScript背景色检测 #

这种方式能精准匹配背景色并切换文本颜色，适合动态或复杂背景场景：

步骤： #

1. 定义CSS变量存储目标颜色：

:root {
  --text-light-bg: #ff7f24; /* 浅色背景下的橙色 */
  --text-orange-bg: #ffffff; /* 橙色背景下的白色 */
  --bg-orange: #ff7f24; /* 预设的橙色背景值 */
}

.menu-text {
  color: var(--text-light-bg); /* 默认显示橙色 */
  padding: 8px 16px;
  transition: color 0.2s ease;
}

2. 编写JS检测背景色并切换：

const menuItems = document.querySelectorAll('.menu-text');

menuItems.forEach(item => {
  // 获取元素计算后的背景色（RGB格式）
  const currentBg = getComputedStyle(item).backgroundColor;
  // 转换预设橙色为RGB格式用于对比
  const targetOrange = new Option().style.color = getComputedStyle(document.documentElement).getPropertyValue('--bg-orange');

  if (currentBg === targetOrange) {
    item.style.color = getComputedStyle(document.documentElement).getPropertyValue('--text-orange-bg');
  } else {
    item.style.color = getComputedStyle(document.documentElement).getPropertyValue('--text-light-bg');
  }
});

如果是hover等动态场景，添加事件监听即可：

menuItems.forEach(item => {
  item.addEventListener('mouseenter', () => {
    item.style.color = getComputedStyle(document.documentElement).getPropertyValue('--text-orange-bg');
  });
  item.addEventListener('mouseleave', () => {
    item.style.color = getComputedStyle(document.documentElement).getPropertyValue('--text-light-bg');
  });
});

方法2：纯CSS伪元素 + 背景裁剪 #

适合静态或通过类控制背景的场景，无需JS：

.menu-text {
  position: relative;
  color: #ff7f24; /* 浅色背景下的橙色 */
  padding: 8px 16px;
}

.menu-text::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: #ffffff; /* 橙色背景下的白色 */
  background-color: #ff7f24;
  -webkit-background-clip: text;
  background-clip: text;
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* 给橙色背景的元素添加类，触发白色文本显示 */
.menu-text.orange-bg::before {
  opacity: 1;
}

使用时只需给对应元素加类：

<div class="menu-text" data-text="Menu">Menu</div>
<div class="menu-text orange-bg" data-text="Menu">Menu</div>

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