如何在CSS中着色图像？

Question

是否有跨浏览器方式使用CSS来更改图像的阴影.例如,如果我有一个灰度图标(一个img元素),我希望它在悬停时将颜色更改为棕褐色.

它必须在IE以外的浏览器上工作,所以我不能使用过滤器.是否有一些CSS 3技巧可以允许？

Answer 1

如果你想修改 css 中的图像，这是不可能的。但是您可以使用 opacity 属性。是的，只设置图像不透明度，但这将是一个很好的效果。这是一个例子：

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

该片段将提供淡入和淡出图像到透明的良好过渡效果。

在其他情况下，您可以使用图像精灵来做您想做的事:)

Answer 2

多年后更新：是的，你可以在 CSS 中为图像着色

我已经要求关闭这个问题，因为它是重复的，但这可能不会发生，因为它已经很老了。无论如何，目前接受的：

“如果你想修改 CSS 中的图像，这是不可能的。”

另一个答案当时是正确的，但现在已经错误很多年了。

CSS 过滤器可以让你做到这一点。

从css 过滤器使元素成为一种颜色：

filter: grayscale(100%) sepia(100%) hue-rotate(90deg);

有一个在线工具可以生成为图像着色所需的滤镜。