如何实现带文字背景的导航按钮颜色反转效果？

我想做一组导航按钮，实现按钮在带文字的背景上颜色反转的效果，试了mix-blend-mode属性但没成功，现有代码如下，求各位给点实现建议：

现有代码 #

CSS 代码 #

.nav {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #b3b3b3;
}

.skills-btn {
  font-family: Roboto, Arial, Helvetica, sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.6rem;
  background-color: #000;
  color: white;
  text-decoration: none;
  border-radius: 60px;
  height: 45px;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  width: auto;
  max-width: 45px;
  -webkit-transition: max-width 0.5s;
  transition: max-width 0.5s;
  z-index: 9999;
  margin: 0 2px;
}

.skills-btn:hover {
  max-width: 300px;
}

.icon {
  margin-right: 23px;
  padding: 0px 12px;
  display: flex;
  align-items: center;
}

.text {
  white-space: nowrap;
  padding-right: 15px;
}

.skills {
  position: fixed;
  bottom: 10;
  left: 20;
  font-size: 3.8rem;
  line-height: 1.8em;
  font-family: Roboto, sans-serif;
  font-weight: 600;
}

HTML 代码 #

<div id="nav" class="nav">
  <a href="#" class="skills-btn">
    <span class="icon"></span>
    <span class="text">App Skills </span>
  </a>
  <a href="#" class="skills-btn">
    <span class="icon"></span>
    <span class="text">Language Skills</span>
  </a>
  <a href="#" class="skills-btn">
    <span class="icon"></span>
    <span class="text">Fields of Experties</span>
  </a>
  <span class="skills">skills</span>
</div>

实现方法 #

用mix-blend-mode确实能实现这个效果，之前没成功大概率是层级或混合上下文的问题，按下面的步骤改就行：

1. 调整背景文字的定位与层级 #

把原来固定定位的.skills放到.nav容器的上下文里，改成绝对定位，同时把它的层级设得比按钮低：

.nav {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #b3b3b3;
  position: relative; /* 给父容器加相对定位，作为子元素绝对定位的参照 */
}

.skills {
  position: absolute; /* 改成绝对定位，相对于.nav容器 */
  bottom: 10px; /* 补上px单位，修复不规范写法 */
  left: 20px;
  font-size: 3.8rem;
  line-height: 1.8em;
  font-family: Roboto, sans-serif;
  font-weight: 600;
  color: #fff; /* 背景文字设为白色，配合混合模式实现反转 */
  z-index: 1; /* 让背景文字在按钮下方 */
}

2. 给按钮设置混合模式 #

去掉按钮原本的黑色背景，改用透明背景，添加mix-blend-mode: difference核心属性，同时调整文字颜色：

.skills-btn {
  font-family: Roboto, Arial, Helvetica, sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.6rem;
  background-color: transparent; /* 替换黑色背景为透明 */
  color: #000; /* 按钮文字设为黑色 */
  text-decoration: none;
  border-radius: 60px;
  height: 45px;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  width: auto;
  max-width: 45px;
  transition: max-width 0.5s;
  z-index: 2; /* 确保按钮在背景文字上方 */
  margin: 0 2px;
  mix-blend-mode: difference; /* 核心：实现颜色反转的混合模式 */
}

3. 可选：补充图标样式 #

如果需要给按钮添加图标，直接在.icon里设置样式即可，混合模式会自动应用到图标上：

.icon {
  margin-right: 23px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  width: 20px;
  height: 20px;
  background-color: #000; /* 图标背景色，会随混合模式反转 */
  border-radius: 50%;
}

完整可运行代码 #

CSS 代码 #

.nav {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #b3b3b3;
  position: relative;
}

.skills-btn {
  font-family: Roboto, Arial, Helvetica, sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.6rem;
  background-color: transparent;
  color: #000;
  text-decoration: none;
  border-radius: 60px;
  height: 45px;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  width: auto;
  max-width: 45px;
  transition: max-width 0.5s;
  z-index: 2;
  margin: 0 2px;
  mix-blend-mode: difference;
}

.skills-btn:hover {
  max-width: 300px;
}

.icon {
  margin-right: 23px;
  padding: 0px 12px;
  display: flex;
  align-items: center;
  width: 20px;
  height: 20px;
  background-color: #000;
  border-radius: 50%;
}

.text {
  white-space: nowrap;
  padding-right: 15px;
}

.skills {
  position: absolute;
  bottom: 10px;
  left: 20px;
  font-size: 3.8rem;
  line-height: 1.8em;
  font-family: Roboto, sans-serif;
  font-weight: 600;
  color: #fff;
  z-index: 1;
}

HTML 代码 #

<div id="nav" class="nav">
  <a href="#" class="skills-btn">
    <span class="icon"></span>
    <span class="text">App Skills</span>
  </a>
  <a href="#" class="skills-btn">
    <span class="icon"></span>
    <span class="text">Language Skills</span>
  </a>
  <a href="#" class="skills-btn">
    <span class="icon"></span>
    <span class="text">Fields of Experties</span>
  </a>
  <span class="skills">skills</span>
</div>

原理说明 #

mix-blend-mode: difference会计算前景色与背景色的颜色差值：当按钮的黑色文字/图标碰到白色背景文字时，会反转成白色；在灰色页面背景上则保持黑色，刚好实现你要的局部颜色反转效果。核心是要保证按钮和背景文字处于同一个父容器上下文，层级关系正确。

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