带有背景颜色的 css 背景图像在 chrome 中显示伪影边框

Question

我正在尝试使用透明.png作为背景图像，以便我可以动态使用我需要的任何颜色来更改“图标”的颜色。

我有一个 40px x 40px 的 .png。我使用背景图像将其应用到 div，然后给同一个 div 设置背景颜色：

.icon {
    width:40px;
    height:40px;
    background-image:url('../images/ico.png');
    background-color:#999999;
}

这通常工作正常，所以我不确定这是怎么回事。以下是我在 Mac 和 PC（分别）最新版本 Chrome 中看到的屏幕截图：

苹果

个人电脑

编辑：这是该网站的精简版本，它显示了我遇到的问题：

我尝试制作一个小提琴（无论如何），但是小提琴在 Chrome 中完美显示，只是不在我的实际网站上。我没有使用百分比或其他任何东西，并且我使用背景的本机大小 - 其他人有这个问题吗？

Answer 1

添加-webkit-backface-visibility：隐藏；到带有图像背景的 div （在您的情况下为 .info .img ）。

您正在父元素上使用转换，而 Chrome 对背面和转换后的元素做了奇怪的事情。

我将链接一个有点相关的答案，尽管它是一个稍微不同的问题的答案：css转换，chrome中的锯齿状边缘