1像素的背景重复放大期间在谷歌Chrome浏览器

1 pixel of background repeat during zoom in Google Chrome

本文关键字：谷歌 Chrome 浏览器 放大 背景 1像素      更新时间：2023-09-26

我在google chrome(桌面和手机)中遇到了一个非常奇怪的问题。这里有一个简单的例子。如果你放大到500%，你会在div的顶部看到一条绿线。似乎背景图像重复了自己。绿线是背景图像的底部，如果我设置背景图像底部透明，这条线就会消失。我在css中添加了repeat-x，但它仍然会重复1个像素

background: url('') repeat-x;

所有内容减去1px，包括背景的x-position 

.red-div{
    background-color: red;
    height: 29px;
    width: 300px;
}
.child {
    width: 100%;
    height: 100%;
    background: url('') repeat-x;
    background-position:-1px 100%;
}

JSFiddle

相关文章：