CSS background-image设置2x2棋盘格背景出现Moiré效应问题咨询

问题原因说明 #

摩尔纹（Moiré）成因 #

你遇到的是高频纹理和渲染采样叠加产生的典型干涉现象，根本原因有三点：

• 2×2棋盘格是二值最高频纹理，每2个像素完成一次黑白交替，只要平铺渲染时的步长和原生图片像素尺寸存在亚像素级偏差，相邻平铺块的纹理偏移就会逐步累积，形成规律性的明暗干涉条纹，也就是摩尔纹。
• 你只设置了background-image属性，没有指定background-size和渲染规则，浏览器会根据当前视口尺寸、设备像素比自动调整背景图的渲染缩放比例，高分屏上CSS逻辑像素和物理像素不匹配的问题会进一步放大偏移误差。
• 浏览器默认对图片做抗锯齿平滑插值，相当于给硬边的棋盘格加了灰度过渡层，这个过渡层会和原始纹理的频率产生次级干涉，让摩尔纹的可见度更高。

中心三角形区域成因 #

这个对称三角区域是纹理平铺偏移的锚点干涉区：
浏览器渲染根节点背景的默认起始位置是视口左上角，当根节点的宽高和纹理尺寸的比例不是整数倍时，横向和纵向的平铺偏移量会在视口中心区域刚好叠加到半个纹理周期的位置，明暗反转的规律在这里形成了清晰的对称边界，最终呈现出你看到的三角形区域。

修复方案 #

给背景样式增加固定尺寸和像素化渲染规则即可消除该现象：

html {
  background-image: url("/tmp/x.png");
  background-size: 2px 2px; /* 取值和你的原图实际尺寸完全一致 */
  image-rendering: pixelated; /* 禁止浏览器对纹理做抗锯齿插值 */
}

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