如何在悬停时更改png的颜色？答案

【问题标题】：How to change color of png on hover?如何在悬停时更改png的颜色？
【发布时间】：2015-04-26 18:21:24
【问题描述】：

我在 illustrator 中制作了一个“向下箭头”并将其保存为具有透明背景的 png。当我将它作为img放入我的网页时，它以原始颜色显示，这没关系。我正在努力做

  img:hover{color:red;}

它不起作用。

有人知道如何让它工作吗？

谢谢

【问题讨论】：

标签： html css icons png

【解决方案1】：

如果您针对现代浏览器，您可以使用CSS filters。

hue-rotate 滤镜适用于改变颜色：

filter: hue-rotate(180deg);
-webkit-filter: hue-rotate(180deg);

确切的度数取决于您的图像和预期结果。

请注意，CSS 过滤器是一项新功能，它的 browser support is limited。

或者，您可以使用CSS sprites 技术，该技术适用于所有合理年龄的浏览器。

【讨论】：

【解决方案2】：

您需要做的是使用 CSS 将图像设置为背景图像。然后使用另一个版本的图像（具有不同的颜色）设置悬停状态。例如：

.element {
  background-image: url(your-image.png);
}

.element:hover {
  background-image: url(your-image-hover-version.png);
}

根据您放置图像/类的位置，您需要分配适当的高度/宽度（或使用填充）。

【讨论】：

【解决方案3】：

您可以通过事件（如悬停）将图像的颜色更改为另一种颜色的相同图像。

html:

<div id="cf">
  <img class="bottom" src="/images/Windows%20Logo.jpg" />
  <img class="top" src="/images/Turtle.jpg" />
</div>

css:

   #cf {
      position:relative;
      height:281px;
      width:450px;
      margin:0 auto;
    }

    #cf img {
      position:absolute;
      left:0;
      -webkit-transition: opacity 1s ease-in-out;
      -moz-transition: opacity 1s ease-in-out;
      -o-transition: opacity 1s ease-in-out;
      transition: opacity 1s ease-in-out;
    }

    #cf img.top:hover {
      opacity:0;
    }

这里详细说明： http://css3.bradshawenterprises.com/cfimg/

【讨论】：

【解决方案4】：

我还想知道一种简单的方法，例如：

.img:hover {
      background: red;
}

或

.img:hover {
      color: red;
}

但没有找到简单的跨浏览器支持解决方案。但是，我发现一些浏览器解决方案使用的 SVG 图像具有 fill 属性，可以通过 CSS 轻松设置。

但是，如果您使用 font-awesome（基本上，它是一种字体，而不是字符，您有不同的图标），使用简单的 CSS 属性 color 很容易控制，就像在 second 示例

因此，如果您想要最简单的解决方案 - 为您的项目找到与您使用的图像相对应的 SVG 图像。我发现这个过程有点痛苦，并决定学习如何将 png 和 .jpg 和 .png 转换为 .svg。有一个命令行工具可以帮助您执行此操作，它称为potrace。如果您决定使用此工具，我建议您查看的一件事是使用简单的编辑器将 dark 对比您想要转换为 path 的所有内容，以获得给定的 .svg 和白色/浅色（不透明） 为背景和您不想在.svg 文件中看到的区域添加颜色。

【讨论】：

【解决方案5】：

申请：

{color:red}

对任何元素都意味着改变文本颜色。

尝试改变：

img:hover {color:red}

到：

img:hover {background-image: url('<insert url to red arrow here>');}

如果您只有一张图片，这将有效。如果您有许多图像并且只希望在悬停时更改一个，则为要更改的图像设置一个 ID 并将 img 和 img:hover 更改为 #x 和 #x:hover 并将 x 替换为您指定的名称身份证。

这是一个示例（假设其他 HTML 完整且格式正确）：

<style type="text/css">
#abc:hover {background-image: url('redarrow.png');}
</style>    
<img ID="abc" src="normalarrow.png">

【讨论】：

【解决方案6】：

了解这是一篇旧帖子，但我发现应用 Richard 采用的方法是有效的，但是在高度和宽度上添加 0px，然后调整边距和填充有效。

.share-icon img {
  background-image: url(../../../images/share-blk.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 0px;
  width: 0px;
  padding: 10px;
  margin: 1px;
}

.share-icon:hover img {
  background-image: url(../../../images/share-pur.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 0px;
  width: 0px;
  padding: 10px;
  margin: 1px;
}

【讨论】：