Question

我有一个PNG文件，我想在悬停时将对象的黑色反转为白色。

我已经尝试了这个

＆＃13;

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

＆＃13;

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

＆＃13;

这会使对象变灰，但我希望它们变成白色。

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">

因此，您唯一需要做的就是：打开图像编辑器，然后用白色填充这些“白色”物体。外部部件可以保持透明。这将解决我猜的问题。

Answer 4

您的代码工作正常，我认为问题出在图片本身

＆＃13;

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

＆＃13;

<img src="//www.tracto.com.br/wp-content/uploads/2014/05/Icone-circular-Facebook.png" width="250">

＆＃13;

有关反转黑到白PNG的问题

4 个答案: