多子元素多行文本CSS渐变失效，如何实现渐变铺满父元素？

要实现父容器高度铺满的渐变文本，同时保留每行文本的子元素包裹器，可以通过父容器设置渐变+子元素继承背景并调整背景定位的方式解决，具体步骤如下：

核心思路 #

将渐变背景定义在父容器上，让每个子元素（span）继承这个背景，然后通过调整每个子元素的背景位置，使它们各自显示父容器渐变的对应区域，拼接后形成完整的跨多行渐变效果。

具体实现 #

1. 调整CSS样式 #

#container {
  width: 640px;
  background: black;
  /* 将渐变背景移到父容器，覆盖整个容器高度 */
  background: -webkit-repeating-linear-gradient(top, #ff0000, #0000ff);
  background-size: 100% 100%;
}

#container span {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
  font-family: Arial;
  display: block; /* 确保每行独占一行 */
  font-size: 50px;
  background: inherit; /* 继承父容器的渐变背景 */
  /* 用CSS变量存储背景偏移量，后续通过JS动态计算 */
  background-position: 0 var(--bg-offset, 0);
}

2. 用JavaScript动态计算背景偏移量 #

由于CSS无法直接获取子元素数量，通过JS计算每个span在父容器中的位置比例，设置对应的背景偏移：

const container = document.getElementById('container');
const spans = container.querySelectorAll('span');
const totalSpans = spans.length;

// 避免除以0的情况（至少1个span）
if (totalSpans <= 1) return;

spans.forEach((span, index) => {
  // 计算当前span对应的渐变偏移比例
  // 第一个span偏移0，最后一个偏移100%，中间按比例分配
  const offsetPercent = (index / (totalSpans - 1)) * 100;
  span.style.setProperty('--bg-offset', `-${offsetPercent}%`);
});

3. 对应的HTML结构 #

<div id="container">
  <span>This is a one line long text.</span>
  <span>This is a one line long text.</span>
  <span>This is a one line long text.</span>
  <span>This is a one line long text.</span>
  <span>This is a one line long text.</span>
  <span>This is a one line long text.</span>
</div>

原理说明 #

• 父容器的渐变背景是完整的、覆盖整个容器高度的红到蓝渐变。
• 每个span继承这个背景后，通过background-position垂直偏移，让自己只显示渐变中对应位置的片段。比如第2个span偏移-16.666%，刚好显示渐变从16.666%到33.333%的部分，和第一个span的顶部片段拼接。
• JS动态计算偏移量的方式，让方案能适配任意数量的子元素，无需手动修改CSS。

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