在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