关于黑转白PNG的问题

Question

我有一个PNG文件，我想将物体的黑色在悬停时倒转到白色。

我已经试过了

​

img:hover {
   -webkit-filter: grayscale(1) invert(1);
    filter: grayscale(1) invert(1);
 }

<img src="http://goproweb.ca/new/img/new/11.png">

​

这使得物体变得灰色，但我希望把它们变成白色。

Answer 1

我相信你的问题产生于使用灰色的图像，而不是黑色。当这个灰色图像被倒置时，它看起来就像一种较浅的灰色。

您的代码工作良好，您只需使用一个更暗的图像，以获得所需的效果。试着用下面这个来交换你的图像：

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Yin_yang.svg/2000px-Yin_yang.svg.png" width="100px" height="100px">

处理不同图像的小提琴：https://jsfiddle.net/9f2cd2df/1/

Answer 2

詹姆斯回答说，你的形象是灰色的。

您可以在下面的片段(左边的图像)中清楚地看到这一点。

您可以修正这个问题，增加对比度(见正确的图像)。

​

body {
  width: 500px;
  background: linear-gradient(black 220px, white 220px, white 440px, tomato 440px);
}

.test {
    width: 200px;
    height: 200px;
    position: relative;
}

.one:hover {
  -webkit-filter: invert(1);
}

.two {
  -webkit-filter: contrast(500%);
}
.two:hover {
  -webkit-filter: invert(1) contrast(500%);

}

<img src="http://goproweb.ca/new/img/new/11.png"" class="test one"></div>
<img src="http://goproweb.ca/new/img/new/11.png"" class="test two"></div>
<img src="http://goproweb.ca/new/img/new/11.png"" class="test one"></div>
<img src="http://goproweb.ca/new/img/new/11.png"" class="test two"></div>
<img src="http://goproweb.ca/new/img/new/11.png"" class="test one"></div>
<img src="http://goproweb.ca/new/img/new/11.png"" class="test two"></div>

​

Answer 3

我把我的评论作为回答，因为我的猜测是正确的。因为您的图像是.png图像，所以它可以包含透明像素。如您的示例所示，您的代码似乎不起作用。当在图像中盘旋时，我猜到图像中的白色元素实际上是透明的。

我所做的只是简单地将您的图像复制到MS绘图中，并将其保存为.jpg。因此，由于jpg格式不支持透明像素，因此不再有透明像素。因此，这应该可以克服倒置问题。

现在，当您运行代码时，您会看到它运行得完美无缺。

​

img:hover {
   -webkit-filter: grayscale(1) invert(1);
    filter: grayscale(1) invert(1);
   }

<img src="http://oi64.tinypic.com/6tibys.jpg">

​

所以，你唯一要做的就是:打开你的图像编辑器，用白色填充这些“白色”身体。外部部分可以保持透明。我想这会解决问题的。