为什么我的背景图像重复大约1像素宽度，但不重复？

Question

我要用拼图代替项目符号。我将它们添加为背景图像。它们设置为不重复。

由于某种原因，它们在底部和右侧重复了大约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

屏幕截图

Answer 1

这是一个chrome渲染错误，特别是带有background-size属性。如果将图像调整为较小的尺寸，将会解决此问题并删除那些不需要的像素。

这里还有一篇文章，详细介绍了该错误以及解决此问题的其他方法：

https://medium.com/@ryanjw/buggy-edges-in-chrome-when-using-background-size-cover-dd6eb44541fc

Answer 2

我看到您已经对渲染问题有了答案，但是如果您使用以下CSS，则无需更改基本图像大小：

li.sidebarmenu_breakfast {
  background: url(https://res.cloudinary.com/djw6vunyp/image/upload/v1541519267/breakfastpuzzle.png) no-repeat left;
  background-size:contain;
  height:50px;
  line-height:50px;
  padding-left:50px;
  margin-bottom:15px;
}

一般来说，也可以让您更好地控制列表的样式。

此处的Codepen示例-https://codepen.io/mattrey/pen/OayyLr

希望这会有所帮助。