Image 如何在CSS中为图像着色？

有没有一种跨浏览器的方法可以使用CSS来更改图像的阴影。例如，如果我有一个灰度图标（一个

img

元素），我希望它在悬停时将颜色更改为深褐色

---

它必须在IE以外的浏览器上工作，所以我不能使用过滤器。是否有一些CSS 3技巧可以做到这一点？

据我所知，没有跨浏览器标准化的语法。但是，您可以使用HTML5画布并自己实现这一效果。使用

SVG

也可以，但我不确定所有浏览器，尤其是internetexploder，对

SVG

的支持程度

使用颜色矩阵变换的SVG示例： 在CSS中没有精确的方法来实现这一点，正如前面提到的，您可以利用其他技术来实现这一点，即Javascript

---

从最基本的意义上讲，您可以尝试通过在图像顶部覆盖一个div来模拟深褐色样式，该div具有类似深褐色的颜色和不透明度

rgba（94,38,18,0.2）

——但这种方法相当粗糙。您甚至可以使用透明图像覆盖，这可能比此选项更好（但仍然是垃圾）

如果要在css中修改图像，则不可能这样做。但您可以使用“不透明度”属性。是的，这只是设置了图像的不透明度，但这将是一个很好的效果。以下是一个例子：

img{-webkit-transition:opacity .3s ease-in-out;}
img:hover{opacity:.6}

该片段将提供一个很好的过渡效果，将淡入淡出图像转换为透明图像

---

在另一种情况下，你可以使用图像精灵来做你想做的事情：）

我知道我回答这个问题真的迟到了，但我一直想做和你一样的事情，却找不到答案。但这里的第一个人给了我启示

我需要的是：一个被某种颜色染上颜色的图像，当我将其悬停时，它会恢复正常。所以我做了什么，我把背景颜色设置成我想要的颜色，然后我降低了它的不透明度。所以我得到了彩色图像。当我将其悬停时，我再次将背景设置为透明，并将图像设置为完全不透明度。因此，有点可能使用CSS的背景颜色和不透明度为图像上色

img {
    background-color: rgba(122, 122, 122, 1);
    opacity: 0.5;
    transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -webkit-transition: 0.5s ease-in-out;
}

img:hover {
    color: rgba(255, 255, 255, 0);
    opacity: 1;
    transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -webkit-transition: 0.5s ease-in-out;
}

---

这对我很有效。

我什么都不知道。好问题+1使用CSS很可能不可能实现。。但是你可以用一些Javascript和

来完成，不要认为它只能用css来完成。你可能想试试像paintbrushjs或pixastic这样的js库。我认为css是不可能的，你可以使用HTML5

canvas

element看看这个页面。也许有用。