css background-image with / background-color显示chrome中的神器边框

Question

我正在尝试使用透明的.png作为背景图像，这样我就可以动态地使用我需要的任何颜色，来改变＆＃34;图标的颜色＆＃34;。

我的.png是40px x 40px。我使用background-image将它应用于div，然后我给同一个div一个背景颜色：

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

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

的Mac

PC

编辑：Here's a stripped down version该网站，显示我遇到的问题：

我尝试制作一个小提琴（here it is anyway），但小提琴完美地显示在chrome中，而不是在我的实际网站上。我没有使用这个或任何东西的百分比，而且我使用原生大小作为背景 - 其他人是否有这个问题？

Answer 1

添加-webkit-backface-visibility：hidden;使用您的图像背景（在您的情况下为.info .img）到div。

你正在使用父元素的变换，而Chrome使用背面和变换元素做奇怪的事情。

我会链接一个有点相关的答案，虽然这是一个稍微不同的问题的答案：css transform, jagged edges in chrome

Answer 2

你对.info的转变正在搞乱它。不要使用百分比，请尝试：

    .info{
        transform: translate(0px,-3px);