css - 用背景颜色填充 png 图像的 alpha channel

我使用带有 alpha channel 的 .png 图像在悬停时更改图像。什么时候我将图像悬停在背景颜色发生变化的位置。所以看起来图像发生了变化。但现在我有一个问题。这适用于所有浏览器，但不适用于 firefox。在 Firefox 中，图像旁边有时会出现一条细线。我怎样才能确保这不会发生。

这是在 firefox 中发生的事情:

enter image description here

这是应该的样子。

enter image description here

最佳答案

您不能为一个元素分配 2 个背景，因此您需要使用如下的 2 个元素:

.object{
  float: left;
  border: 1px solid #FFF;
}
.object:hover{
  background: #FEF;
  border: 1px solid #F00;
}

<div class="object">
  <img src="https://wiki.videolan.org/skins/common/images/vlc_wiki.png"/>
</div>

关于css - 用背景颜色填充 png 图像的 alpha channel ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27362249/