javascript - 在 Google Chrome 中缩放时背景重复 1 像素

Question

我在谷歌浏览器（桌面和移动）中遇到了非常奇怪的问题。这是jsfiddle 示例。如果你放大到 500%，你会在 div 的顶部看到绿线。背景图像似乎在重复。绿线是我的背景图像的底线，如果我使背景图像底部透明，它就会消失。我在我的 css 中添加了 repeat-x，但它仍然重复了我的图像的 1 个像素：

background: url('') repeat-x;

Answer 1

从所有内容中减去 1px，包括背景 x 位置。

.red-div{
    background-color: red;
    height: 29px;
    width: 300px;
}

.child {
    width: 100%;
    height: 100%;
    background: url('') repeat-x;
    background-position:-1px 100%;

}

JSFiddle