如何解决HTML/CSS中缩小字距后文本重叠变暗问题

文本重叠时（比如字母'R'和'A'的位置）会变暗，我想让其中一个字母盖在另一个上面，或者用其他办法解决这个问题。

我的代码 #

CSS #

.gradient-text-wrapper {
  position: relative;
  display: inline-block;
  text-transform: uppercase;
  font-family: 'Arial', sans-serif;
}

.gradient-text {
  font-size: 10rem;
  font-weight: bold;
  background: linear-gradient(86deg, #FBFF6B 15.27%, #D66A6A 51.02%, #A600F4 99.78%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(255, 0, 0, 0.18);
  position: relative;
  z-index: 1;
  mix-blend-mode: lighten;
  letter-spacing: -1.1rem;
}

.centered {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

HTML #

<div class="centered">
  <div class="gradient-text-wrapper">
    <span class="gradient-text">Gradient</span>
  </div>
</div>

我猜变暗是半透明的text-fill导致的，但这个设置不能改:(。我用这种方式做渐变文本，是因为项目里还有更复杂的需求，比如要在文本后面加相同的文字当阴影。

问题根源就是半透明文本叠加后，mix-blend-mode: lighten的计算逻辑让重叠区域变暗。给你两个可行的方案：

方案一：伪元素做渐变文本，原文本当遮罩 #

既能保留半透明需求，又能解决重叠变暗的问题：

.gradient-text-wrapper {
  position: relative;
  display: inline-block;
  text-transform: uppercase;
  font-family: 'Arial', sans-serif;
}

.gradient-text {
  font-size: 10rem;
  font-weight: bold;
  color: rgba(255, 0, 0, 0.18); /* 保留半透明设置 */
  position: relative;
  z-index: 2;
  letter-spacing: -1.1rem;
}

.gradient-text-wrapper::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  font-size: 10rem;
  font-weight: bold;
  background: linear-gradient(86deg, #FBFF6B 15.27%, #D66A6A 51.02%, #A600F4 99.78%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  z-index: 1;
}

.centered {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

<div class="centered">
  <div class="gradient-text-wrapper" data-text="Gradient">
    <span class="gradient-text">Gradient</span>
  </div>
</div>

原理：把渐变文本放在伪元素里当底层，原半透明文本放在上层。伪元素是完全不透明的渐变文本，上层半透明文本叠加时，重叠区域不会因为多层半透明混合而变暗。

方案二：调整混合模式，用伪元素做阴影 #

不想改结构的话，可以把mix-blend-mode换成normal，同时用伪元素实现文字阴影（满足你的额外需求）：

.gradient-text-wrapper {
  position: relative;
  display: inline-block;
  text-transform: uppercase;
  font-family: 'Arial', sans-serif;
}

.gradient-text {
  font-size: 10rem;
  font-weight: bold;
  background: linear-gradient(86deg, #FBFF6B 15.27%, #D66A6A 51.02%, #A600F4 99.78%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(255, 0, 0, 0.18);
  position: relative;
  z-index: 2;
  letter-spacing: -1.1rem;
}

.gradient-text-wrapper::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  font-size: 10rem;
  font-weight: bold;
  color: #000; /* 阴影颜色可以自己改 */
  z-index: 1;
  letter-spacing: -1.1rem;
}

.centered {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

<div class="centered">
  <div class="gradient-text-wrapper" data-text="Gradient">
    <span class="gradient-text">Gradient</span>
  </div>
</div>

这种方式去掉了mix-blend-mode，用伪元素做文字阴影，上层半透明渐变文本的重叠区域就不会因为混合模式变暗了。

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