如何让repeating-linear-gradient与font-size完美适配？

你的问题核心是固定的背景间隔和textarea的行高、字体大小不匹配，导致输入多行文本后条纹偏移。要让条纹和文本完美适配，需要让背景的重复周期与文本的行高完全绑定，同时对齐文本的起始位置。

正确的实现方案 #

textarea {
  /* 重置浏览器默认样式，避免差异干扰 */
  border: none;
  padding: 0;
  font-size: 1rem; /* 设定基础字体大小，后续单位以此为基准 */
  line-height: 1.2; /* 文本行高，直接决定条纹的重复间隔 */
  width: 100%;
  height: 300px;
  /* 背景条纹：间隔与line-height严格匹配 */
  background: repeating-linear-gradient(
    white,
    white calc(1.2em - 1px), /* 行高减1px，留出线条的显示空间 */
    #ccc calc(1.2em - 1px),
    #ccc 1.2em
  );
  /* 微调背景起始位置，让第一条条纹和第一行文本对齐 */
  background-position: 0 0.1em;
  /* 可选：用等宽字体更贴近记事本效果 */
  font-family: monospace;
}

<textarea></textarea>

关键要点解析 #

• 用em替代固定单位：em会基于当前元素的font-size动态计算，确保条纹间隔随字体大小同步变化，不会出现固定rem值导致的错位。
• 行高与条纹间隔绑定：把背景的重复周期设为和line-height完全一致，这样每一行文本刚好对应条纹的一行空白+一条分隔线。
• 对齐背景起始位：通过background-position微调，让第一条条纹和文本的第一行基线对齐，解决初始偏移问题。
• 重置默认样式：textarea默认自带padding和border，会打乱背景与文本的对齐关系，先重置这些样式才能保证效果准确。

进阶优化（可选） #

如果需要支持用户调整字体大小，只需修改font-size参数，条纹和行高会自动适配，无需改动其他样式：

textarea {
  font-size: 1.2rem; /* 调整字体大小，条纹会自动同步匹配 */
  line-height: 1.2;
  /* ...其他样式保持不变 */
}

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