重复的背景在某些缩放级别上显示不需要的网格图案

Question

在重复的背景上，重复的图块的边缘在某些缩放级别上未完全对齐。这会导致不必要的边缘，因为在1px的间隙中可以看到背景颜色。

我已经做过一些背景阅读，并且了解这可能是由于缩放导致的十进制像素值的舍入误差。将背景磁贴的大小调整几个像素可以消除一个缩放级别的问题（因为缩放后的图像尺寸为整数值），但显然会破坏其他缩放值。

将背景图块稍微重叠可能会起作用，但是我不确定重复的background如何实现。禁用缩放是另一种选择，但我想尽可能避免这种情况。

如下所示的代码显示了将缩放比例设置为85％（甚至在63％时更糟）时Chrome中的问题：

#header {
  background: linear-gradient(135deg, #ECEDDC 24.9%, transparent 25.1%) -70px 0,
              linear-gradient(225deg, #ECEDDC 24.9%, transparent 25.1%) -70px 0,
              linear-gradient(315deg, #ECEDDC 24.9%, transparent 25.1%),
              linear-gradient(45deg, #ECEDDC 24.9%, transparent 25.1%);
  background-size: 140px 140px;
  background-color: #29AB87;
  width: 100vw;
  height: 100vh;
}

<div id="header"></div>

问题的屏幕截图：

Answer 1

使用conic-gradient()创建此效果的想法不同，因为我们仅依赖两个渐变，但实际上仅受chrome支持，因此可以减少这种不良影响

body {
  background: 
   conic-gradient(
    #ECEDDC 0 0.125turn,
    transparent 0.126turn 0.874turn,
    #ECEDDC 0.875turn 1turn),
   conic-gradient(
    transparent 0 0.375turn,
    #ECEDDC 0.376turn 0.624turn,
    transparent 0.625turn 1turn) 70px 0.8px,
   #29AB87;

  background-size: 140px 140px;
  margin:0;
  height: 100vh;
}

您会注意到，我在色标中使用了0.001turn的细微差别，以避免出现锯齿状边缘，并且我还通过0.8px转换了第二个渐变，以创建小的重叠并避免出现间隙。 / p>

---

为获得更好的支持和更好的渲染，请考虑使用SVG，如下所示：

body {
  background: 
   url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" ><polygon fill="%23ECEDDC" points="0,0  20,0  10,10"/></svg>'), 
   url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" ><polygon fill="%23ECEDDC" points="0,20 20,20 10,10"/></svg>') 70px 0,
   #29AB87;

  background-size: 140px 140px;
  margin:0;
  height: 100vh;
}

Answer 2

使用具有内部重复模式的整页SVG似乎可以最顺畅地缩放

df[['A', 'B']].replace('a', 'b', inplace=True)

df