小尺寸背景图像重复平铺时部分行消失发虚的原因及解决方法

问题诱因 #

该问题是浏览器对图像缩放的默认渲染规则导致的：

• 你使用的外部SVG网格的线条默认宽度为1px，当background-size设置为25px及以下时，SVG被缩小渲染，1px的线条在缩放后实际占用的物理像素不足1个，浏览器的默认平滑抗锯齿算法会把线条渲染得半透发虚，部分场景下甚至会直接忽略不足1像素的线条，出现行消失的问题。
• 页面放大后显示正常，本质是放大后线条占用的物理像素数量增加，不再触发不足1像素的渲染裁剪逻辑。

修复方案 #

推荐优先使用CSS渐变直接生成网格，规避外部图像缩放的渲染问题，代码示例如下：

div {
  background: pink;
  height: 713px;
  width: 400px;
  /* 自定义网格尺寸和线条宽度 */
  --grid-size: 25px;
  --line-width: 1px;
  background-size: var(--grid-size) var(--grid-size);
  background-image: 
    linear-gradient(to right, #000 var(--line-width), transparent 0),
    linear-gradient(to bottom, #000 var(--line-width), transparent 0);
}

如果必须使用外部SVG实现，可通过以下两个配置优化：

• 修改SVG源文件，给根节点添加shape-rendering="crispEdges"属性，要求浏览器渲染SVG时优先保证边缘清晰，不做平滑抗锯齿处理
• 给应用背景的div添加image-rendering: pixelated;样式，指定背景图缩放时使用临近像素插值，避免线条发虚

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