1

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

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

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

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

苹果电脑在此处输入图像描述

个人电脑在此处输入图像描述

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

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

4

2 回答 2

5

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

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

我将链接一个有点相关的答案，尽管它是一个稍微不同的问题的答案：css transform, jagged edges in chrome

于 2014-12-12T16:56:58.513 回答
1

你在 .info 上的转换是什么搞砸了。不要使用百分比，请尝试：

    .info{
        transform: translate(0px,-3px);
于 2014-12-12T17:02:08.643 回答