如何让线性渐变背景在不同屏幕尺寸下固定对应位置？

问题核心在于你用了百分比作为渐变分界，这个百分比是相对于容器宽度的，屏幕尺寸变化时容器宽度跟着变，分界位置就会偏移，自然和Logo的文字对应不上。background-attachment: fixed控制的是背景是否随页面滚动，和渐变位置计算完全无关，所以没用。下面是两种可行方案：

方案一：固定宽度分界（适合Logo尺寸固定的场景） #

如果你的Logo中“Stack”部分的宽度是固定值（比如设计稿里是110px），直接把渐变的百分比换成固定像素值：

.logo-container {
  background: linear-gradient(to right, #00008B 110px, #E60026 0%);
  /* 确保容器和Logo对齐，比如设置inline-block或匹配Logo的宽高 */
  display: inline-block;
}

这样不管屏幕怎么变，蓝色区域的宽度始终是110px，刚好对应“Stack”部分。

方案二：动态计算宽度（适合响应式缩放的Logo） #

如果Logo会随屏幕缩放，需要动态获取“Stack”部分的实际宽度，再同步给渐变：

1. 给Logo里的“Stack”单独套一个标签：

<div class="logo-container">
  <span class="stack-text">Stack</span>overflow
</div>

2. 用JS获取宽度并设置CSS变量，同时监听窗口 resize 更新：

// 计算并设置Stack部分宽度
function updateGradientBreakpoint() {
  const stackWidth = document.querySelector('.stack-text').offsetWidth;
  document.documentElement.style.setProperty('--stack-width', `${stackWidth}px`);
}

// 初始化和监听窗口变化
updateGradientBreakpoint();
window.addEventListener('resize', updateGradientBreakpoint);

3. 用CSS变量写渐变：

.logo-container {
  background: linear-gradient(to right, #00008B var(--stack-width), #E60026 0%);
  display: inline-block;
}

这样渐变的分界点会始终和“Stack”文字的宽度保持一致，不管屏幕怎么缩放都能精准对应。

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