我正在用拼图 block 替换列表中的要点。我将它们添加为背景图像。它们被设置为不重复。
出于某种原因，它们在底部和右侧重复了大约 1 个像素的宽度。我不知道如何解决它。当我删除背景 css 的“不重复”部分时，它仍然以这种方式显示。
提前致谢!
#menu-breakfast-lunch-sidebar-menu li.sidebarmenu_lunch {
background: url(http://url.wpengine.com/wp-
content/uploads/2018/11/puzzlepiece_lunchmenu.jpg) no-repeat left top;
padding-left: 60px;
background-size: 50px;
padding-bottom: 25px;
background-position: 0% 0%;
}
这是我在 CodePen 上的例子:https://codepen.io/Clare12345/pen/pQjvWa
截图
最佳答案
这是一个 chrome 渲染错误，特别是 background-size 属性。如果您将图像的大小调整得更小，它将解决该问题并移除那些不需要的像素。
这里还有一篇文章，详细介绍了错误和其他解决问题的方法:
https://medium.com/@ryanjw/buggy-edges-in-chrome-when-using-background-size-cover-dd6eb44541fc
关于css - 为什么我的背景图像重复大约 1 像素宽度，但没有重复？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53174824/