求助：CSS多背景在相对尺寸<div>中无法精准对齐的问题

当使用3个以上相对尺寸的CSS背景时，很难做到精准对齐且无重叠。以4个各占25%宽度的背景为例，预期将它们定位在0%、25%、50%、75%来填满100%宽度的容器，但实际表现是第一个背景左锚定、最后一个右锚定，中间的背景却默认是居中锚定的。

若要修正居中锚定的背景位置，需使用33.333...%这类循环小数，但浏览器的像素舍入处理会导致透明背景的重叠区域出现暗线。

原问题代码示例：

.multi-gradiant-background {
  pointer-events: none;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  background: radial-gradient(ellipse at center bottom, rgba(0, 0, 255, 0.5) 50%, rgba(0, 0, 0, 0.2) 70%), radial-gradient(ellipse at center bottom, rgba(0, 255, 0, 0.5) 50%, rgba(0, 0, 0, 0.2) 70%), radial-gradient(ellipse at center bottom, rgba(255, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.2) 70%), radial-gradient(ellipse at center bottom, rgba(0, 0, 255, 0.5) 50%, rgba(0, 0, 0, 0.2) 70%);
  background-repeat: no-repeat;
  background-size: 25% 100%, 25% 100%, 25% 100%, 25% 100%;
  background-position: 0% top, 25% center, 50% center, 100% center;
  background-clip: border-box, border-box, border-box, border-box;
}

<div class="multi-gradiant-background"></div>

核心方案：统一左锚定定位逻辑 #

所有背景都采用左锚定（而非混合左/中/右锚定），第i个背景（从0开始计数）的水平位置计算为 (i * 100%) / n，其中n是背景总数。这样每个背景的左边缘会精准衔接上一个背景的右边缘，完全避免重叠、间隙和舍入暗线。

修正后的4背景示例代码：

.multi-gradiant-background {
  pointer-events: none;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  background: radial-gradient(ellipse at center bottom, rgba(0, 0, 255, 0.5) 50%, rgba(0, 0, 0, 0.2) 70%), radial-gradient(ellipse at center bottom, rgba(0, 255, 0, 0.5) 50%, rgba(0, 0, 0, 0.2) 70%), radial-gradient(ellipse at center bottom, rgba(255, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.2) 70%), radial-gradient(ellipse at center bottom, rgba(0, 0, 255, 0.5) 50%, rgba(0, 0, 0, 0.2) 70%);
  background-repeat: no-repeat;
  background-size: 25% 100%; /* 简化重复值 */
  background-position: 0% left top, 25% left top, 50% left top, 75% left top; /* 统一左锚定 */
  background-clip: border-box; /* 简化重复值 */
}

7背景场景示例代码：

如果是7个各占100%/7宽度的背景，代码如下：

.multi-gradiant-background-7 {
  pointer-events: none;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  background: 
    radial-gradient(ellipse at center bottom, rgba(0,0,255,0.5) 50%, rgba(0,0,0,0.2) 70%),
    radial-gradient(ellipse at center bottom, rgba(0,255,0,0.5) 50%, rgba(0,0,0,0.2) 70%),
    radial-gradient(ellipse at center bottom, rgba(255,0,0,0.5) 50%, rgba(0,0,0,0.2) 70%),
    radial-gradient(ellipse at center bottom, rgba(255,255,0,0.5) 50%, rgba(0,0,0,0.2) 70%),
    radial-gradient(ellipse at center bottom, rgba(255,0,255,0.5) 50%, rgba(0,0,0,0.2) 70%),
    radial-gradient(ellipse at center bottom, rgba(0,255,255,0.5) 50%, rgba(0,0,0,0.2) 70%),
    radial-gradient(ellipse at center bottom, rgba(128,0,128,0.5) 50%, rgba(0,0,0,0.2) 70%);
  background-repeat: no-repeat;
  background-size: calc(100%/7) 100%;
  background-position: 
    0% left top, 
    calc(100%/7) left top, 
    calc(200%/7) left top, 
    calc(300%/7) left top, 
    calc(400%/7) left top, 
    calc(500%/7) left top, 
    calc(600%/7) left top;
  background-clip: border-box;
}

方案说明 #

• 统一使用left top作为锚定基准，确保所有背景的位置计算逻辑一致
• 利用calc()精准计算每个背景的水平位置，避免手动输入循环小数
• 每个背景的宽度为100%/n，左边缘刚好与上一个背景的右边缘对齐，完全消除重叠和间隙，也不会出现浏览器舍入导致的暗线

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