页面缩放时如何让线性渐变的白色区域始终位于容器文本下方

解决方案 #

核心问题是你之前将渐变挂载在body这类外层全局容器上，渐变的尺寸计算会跟随外层容器/视窗大小变化，页面缩放时自然会和内部文本错位。调整方案如下：

步骤1：将渐变绑定到文本所属元素 #

不要把渐变加在body上，直接给包裹文本的元素设置属性，让元素尺寸刚好贴合文本内容：

.target-text {
  /* 让元素宽度完全匹配文本+内边距的大小，不会撑满父容器 */
  display: inline-block;
  /* 根据你的设计需求设置左右内边距，对应渐变两侧彩色区域的宽度 */
  padding: 0 20px;
}

步骤2：设置适配的渐变规则 #

用固定长度值定义渐变的起止位置，替代之前基于全局容器的百分比设置：

.target-text {
  /* 90度横向渐变，两侧彩色、中间白色，起止位置和padding值对应 */
  background: linear-gradient(
    90deg,
    #你的左侧色值 0%,
    #你的左侧色值 20px,
    #fff 20px,
    #fff calc(100% - 20px),
    #你的右侧色值 calc(100% - 20px),
    #你的右侧色值 100%
  );
}

额外适配场景 #

如果需要同时适配字体大小缩放，可以把固定像素单位替换为em/rem/ch这类相对字体的单位：

• 1em等于当前元素的字体大小，会跟着字号同步缩放
• 1ch等于当前字体下数字0的宽度，更适合匹配文本字符宽度

调整后渐变的尺寸会完全跟随文本元素本身的大小变化，无论页面缩放还是字号调整，都能始终和文本对齐。

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