咨询：像素风背景图重复显示时变模糊的解决办法

我有一张像素艺术风格的背景图，正常显示时是清晰的像素化效果，但当窗口宽度足够让图片开始横向重复时，整张图会变得模糊。

当前使用的CSS样式：

position: absolute;
bottom: 0;
height: 200px;
width: 100%;

background-size: auto 100%;
background-repeat: repeat-x;
image-rendering: pixelated;

React中div的写法：

<div className='footer' style={{ backgroundImage: `url(${Image})` }}></div>

已尝试过的无效方案：

• 将image-rendering设为crisp-edges
• 添加浏览器前缀的渲染属性：

  image-rendering: -moz-crisp-edges;
  image-rendering: -o-crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  -ms-interpolation-mode: nearest-neighbor;
  

• 放大图片分辨率，仅缓解问题但未彻底解决
• 临时权宜之计：调整background-size让图片在常规屏幕上不重复，但宽屏仍会模糊

补充：仅在图片被缩小显示时出现模糊，放大时正常。

问题出在背景图的非整数倍缩放：background-size: auto 100%会强制将图片高度拉伸/缩小到200px，如果图片原始高度不是200px的整数倍，浏览器会对像素进行插值处理，此时即使设置了image-rendering: pixelated，重复渲染时的半像素插值仍会导致模糊。部分浏览器对重复背景图的渲染优先级高于image-rendering属性，也会导致设置失效。

方案1：强制背景图以整数倍缩放 #

确保背景图的缩放比例为整数，避免半像素插值：

1. 先确认图片的原始高度（假设为originalHeight）
2. 计算整数缩放倍数：scale = Math.round(200 / originalHeight)
3. 设置background-size为原始尺寸的整数倍，或直接让div高度匹配原始尺寸的整数倍

示例代码： #

假设图片原始高度为100px，缩放倍数为2：

.footer {
  position: absolute;
  bottom: 0;
  height: 200px;
  width: 100%;
  /* 用原始高度的2倍，刚好填满div高度，无插值 */
  background-size: auto 100px;
  background-repeat: repeat-x;
  image-rendering: pixelated;
}

如果允许调整div高度，更简单的方式：

.footer {
  position: absolute;
  bottom: 0;
  /* 直接用图片原始高度 */
  height: 100px;
  width: 100%;
  background-size: auto 100%;
  background-repeat: repeat-x;
  image-rendering: pixelated;
}

方案2：用Canvas精确绘制重复像素图 #

通过Canvas手动绘制重复的像素背景，完全控制渲染逻辑，避免浏览器的自动插值：

React组件示例： #

import { useEffect, useRef } from 'react';
import PixelBg from './pixel-background.png';

const PixelFooter = () => {
  const canvasRef = useRef(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    const img = new Image();
    img.src = PixelBg;

    const drawBackground = () => {
      if (!img.complete) return;
      // 关闭所有平滑渲染
      ctx.imageSmoothingEnabled = false;
      ctx.msImageSmoothingEnabled = false;
      ctx.webkitImageSmoothingEnabled = false;
      ctx.mozImageSmoothingEnabled = false;

      const canvasHeight = 200;
      const scale = canvasHeight / img.height;
      const scaledImgWidth = img.width * scale;
      canvas.width = window.innerWidth;
      canvas.height = canvasHeight;

      // 横向重复绘制图片
      for (let x = 0; x < canvas.width; x += scaledImgWidth) {
        ctx.drawImage(img, x, 0, scaledImgWidth, canvasHeight);
      }
    };

    img.onload = drawBackground;
    // 窗口 resize 时重绘
    window.addEventListener('resize', drawBackground);
    return () => window.removeEventListener('resize', drawBackground);
  }, []);

  return (
    <canvas
      ref={canvasRef}
      style={{
        position: 'absolute',
        bottom: 0,
        left: 0,
        right: 0,
      }}
    />
  );
};

export default PixelFooter;

方案3：用background-repeat: space避免拉伸（可选） #

如果允许两侧留白，可以用space代替repeat-x，让图片以原始尺寸重复，自动在两侧分配空白：

.footer {
  position: absolute;
  bottom: 0;
  height: 200px;
  width: 100%;
  background-size: auto 100%;
  background-repeat: space;
  background-position: left bottom;
  image-rendering: pixelated;
}

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