为何Chrome/Brave无法渲染超宽div的background-image？如何修复？

你没有操作错误，该现象是Chromium内核（Chrome、Brave等）浏览器的固有资源限制导致的。主流消费级设备下，Chromium对单张可渲染图像的最大单边尺寸限制为16384px，宽度为16226px的图像低于该阈值可正常加载，16958px超出阈值后会被浏览器直接丢弃，因此背景显示为白色。

方案1：拆分超宽图片为多段切片 #

将宽度超过16384px的单张1px高图片，拆分为多张宽度不超过16000px的切片，在父容器内并排摆放多个子div，每个子div对应一张切片，各自设置垂直平铺，拼接后即可还原完整效果。

/* 示例代码：16958px拆分为16000px+958px两段 */
.container {
  display: flex;
  height: 100px;
  border: 1px solid #000;
}
.slice1 {
  width: 16000px;
  background-image: url(/* 第一段切片的base64 */);
  background-repeat: repeat-y;
}
.slice2 {
  width: 958px;
  background-image: url(/* 第二段切片的base64 */);
  background-repeat: repeat-y;
}

<div class="container">
  <div class="slice1"></div>
  <div class="slice2"></div>
</div>

该方案完全基于CSS background实现，无额外性能开销，兼容性最好。

方案2：使用Canvas预绘制后作为背景 #

如果不想拆分原图片，可以用Canvas完成垂直平铺绘制，再将绘制结果转为DataURL作为背景使用：

const targetDiv = document.getElementById('div2');
const targetHeight = 100; // div的目标高度
const img = new Image();
img.src = '/* 你的超宽1px图片的base64 */';
img.onload = () => {
  const canvas = document.createElement('canvas');
  canvas.width = img.width;
  canvas.height = targetHeight;
  const ctx = canvas.getContext('2d');
  // 垂直重复绘制1px高的原图
  for (let i = 0; i < targetHeight; i++) {
    ctx.drawImage(img, 0, i);
  }
  // 赋值给background-image
  targetDiv.style.backgroundImage = `url(${canvas.toDataURL()})`;
}

该方案不需要修改原图片资源，适配性更强。

方案3：旋转图片适配维度限制 #

将原宽×高=16958×1的超宽图片旋转为1×16958的超高图片，此时图片宽度仅1px远低于阈值，再通过CSS旋转背景伪元素还原显示方向：

#div2 {
  position: relative;
  margin: 10px;
  height: 100px;
  width: 16958px;
  border: 1px solid #000;
  overflow: hidden;
}
#div2::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 16958px;
  background-image: url(/* 旋转后的超高图片base64 */);
  background-repeat: repeat-x;
  transform-origin: top left;
  transform: rotate(90deg) translateY(-100%);
}

该方案完全基于CSS实现，不需要拆分图片。

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