如何在悬停时为图像着色？ [关闭]答案

【问题标题】：How do I color image on hover? [closed]如何在悬停时为图像着色？ [关闭]
【发布时间】：2015-09-07 17:07:59
【问题描述】：

初学者，我正在尝试将 RSS 图标背景的颜色更改为橙色我用橙色背景制作了单独的图标，但我不知道该怎么做这是我的代码 HTML：http://pastebin.com/bPZf8DmA CSS：http://pastebin.com/kwyAnygJ 非常感谢！

【问题讨论】：

你会提供一个活生生的例子的链接吗？您是否尝试更改透明图像的背景？
imgur.com/a/2SqnS
尝试将相关代码添加到您的问题中 - 很多人不会去第三方网站查看它。

标签： html css web hover

【解决方案1】：

如果您尝试更改透明图像的背景（我无法访问您的图像，因此无法确定），您可以将background-color 添加到:hover 状态，如下所示：

http://jsfiddle.net/ryanpcmcquen/we3d9h8o/

img:hover {
  background-color: purple;
}

&lt;img src="https://clbin.com/VMHNmx.png" /&gt;

编辑：

现在您提供了示例，这应该适合您（用 css 交换 background-image）：

http://jsfiddle.net/ryanpcmcquen/L1nkh00e/

.rss__icon {
  width: 32px;
  height: 32px;
  background-image: url(https://clbin.com/LSluSU.png);
}
.rss__icon:hover {
  background-image: url(https://clbin.com/5B1Mhb.png);
}

&lt;div class="rss__icon"&gt;&lt;/div&gt;

不过，阅读 CSS sprites 会更好：https://css-tricks.com/css-sprites/

【讨论】：

我很抱歉措辞不当，我正在尝试这样做imgur.com/a/2SqnS
非常感谢您提供 CSS sprites 链接。
@JhonDhoe，如果这个答案有效，请接受。