css - 使用css更改图像的颜色？

Question

是否可以仅使用 CSS 更改图像的颜色？

（我使用的是透明的背景字形图标，我的主题需要不同的符号 [非背景] 颜色）

Answer 1

您可以使用图像色调，但我不知道它是否会给您带来您期望的效果：

基本上，您将一个<figure>元素包裹在您的周围<img/>并对其应用样式：

/*HTML*/
<figure class="tint">  
  <img src="icon.png" width="400" height="260">  
</figure> 

/*CSS*/
.tint {  
    position: relative;  
    float: left;  
    cursor: pointer;  
}  

.tint:before {  
    content: "";  
    display: block;  
    position: absolute;  
    top: 0;  
    bottom: 0;  
    left: 0;  
    right: 0;  
    background: rgba(0,255,255, 0.5);  
    -moz-transition: background .3s linear;  
    -webkit-transition: background .3s linear;  
    -ms-transition: background .3s linear;  
    -o-transition: background .3s linear;  
    transition: background .3s linear;  
}  

.tint:hover:before {  
    background: none;  
}  

检查链接以获取演示和完整的代码示例。

在这个网站上，您还可以查看一些不同的方法。

Answer 2

不可以。因为这些是图像图标，您不能更改它们的颜色。您可以尝试使用这些http://www.entypo.com/。由于这些是字体，它们可以轻松更改颜色。