使用transform:scale(-1,1)结合background-clip:text时文字消失问题

问题原因 #

你的实现里，渐变背景只设置在父容器.gradient上，子元素（单个字母的div）仅继承了color: transparent，但**background属性默认不继承**——你看到的文字渐变，其实是子元素透明的文字“透出”了父容器的背景。

当给子元素添加transform: scale(-1,1)时，这个CSS属性会触发两个关键变化：

1. 创建新的堆叠上下文，子元素的渲染层级和范围与父容器分离；
2. 元素坐标系被水平反转，文字的裁剪区域（由background-clip:text控制）也跟着反转。

这两个变化叠加后，父容器的背景无法再透过反转后的子元素文字区域显示，所以文字看起来就消失了。

解决方案 #

给每个子元素独立设置渐变背景和background-clip:text，让每个字母都拥有自己的背景，这样反转时背景会随元素一起被裁剪和变换，就能正常显示。

修改后的代码 #

CSS

.reverse {
  transform: scale(-1, 1);
}

.gradient {
  display: flex;
  gap: 8px;
  --bg-size: 400%;
  --color-one: hsl(15 90% 55%);
  --color-two: hsl(40 95% 55%);
  font-family: sans-serif;
  font-size: clamp(3rem, 25vmin, 8rem);
}

/* 给每个子元素单独设置背景和文字裁剪 */
.gradient > div {
  background: linear-gradient(90deg, var(--color-one), var(--color-two), var(--color-one)) 0 0 / var(--bg-size) 100%;
  color: transparent;
  background-clip: text;
}

@media (prefers-reduced-motion: no-preference) {
  .gradient > div {
    animation: move-bg 8s linear infinite;
  }
  @keyframes move-bg {
    to {
      background-position: var(--bg-size) 0;
    }
  }
}

HTML（无需改动）

<div class="gradient">
  <div>H</div>
  <div>E</div>
  <div class="reverse">L</div>
  <div>L</div>
  <div>O</div>
</div>

效果说明 #

修改后，每个字母的div都有独立的渐变背景，background-clip:text会将背景裁剪到文字形状。即使添加transform: scale(-1,1)反转元素，背景也会跟随元素的变换一起渲染，文字的渐变效果和反转状态都能正常显示。

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