用背景色填充 png 图像的 alpha 通道答案

【问题标题】：Fill alpha channel of png image with background-color用背景色填充 png 图像的 alpha 通道
【发布时间】：2015-02-06 08:37:58
【问题描述】：

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

这是在 Firefox 中发生的事情：

这就是应该的样子。

【问题讨论】：

我不明白，是错误的图像问题吗？还可以考虑检查错误的图像是否真的有一个 1 像素的边框，在您的照片编辑器中不太明显。您还可以发布代码和/或 js fiddle 来重现此问题吗？
问题是图片周围出现了背景色的细线。该图像没有我在我的 Photoshop 中检查的 1px 边框。而且问题只出现在Firefox中
代码或它没有发生。
在我看来，这可能是显示边框或略微显示橙色背景的一些填充的问题。你可以试试边界：0；或填充：0；看看是否有帮助
Css: .doors img { max-height: 350px;显示：块；边距：0 自动；最大宽度：100%； } .doors img:hover { 背景颜色：#f75414;光标：指针； }

标签： css png alpha

【解决方案1】：

您不能将 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>

【讨论】：