Question

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

它必须适用于IE以外的浏览器，所以我不能使用过滤器。是否有一些CSS 3技巧可以实现？

Answer 1

如果你想在css中修改图像，那么就不可能这样做。但你可以玩不透明属性。是的，只设置图像不透明度，但它将是一个很好的效果。这是一个例子：

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

该片段将淡入和淡出图像的过渡效果变为透明。

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

Answer 2

我知道没有针对此的跨浏览器标准化语法。但是，您可以使用HTML5 Canvas并自行完成此操作。使用SVG也可以，但我不确定所有浏览器，特别是互联网爆炸者，支持SVG的效果如何。

使用颜色矩阵变换的SVG示例： http://www.dhmedia.com.au/sites/default/files/examples/SVG-filters/sepia.xhtml

Answer 3

在CSS中没有准确的方式来实现这一点，如前所述，你可以利用其他技术来实现这一点 - 即Javascript。

在非常基本的意义上，您可以尝试通过在图像顶部叠加一个div，使用棕褐色，如颜色和不透明度{{}来尝试模仿棕褐色样式。 1}} - 但这种方法相当粗糙。您甚至可以使用透明图像进行叠加，这可能比此选项更好（但仍然非常垃圾）。

Answer 4

我知道我回答这个话题的时间已经很晚了，但我一直想和你做同样的事情而找不到答案。但这里的第一个人给了我一个启示。

我需要的东西：一种颜色相当鲜艳的图像，当我悬停它时，它会再次正常。那么我做了什么，我将背景颜色设置为我想要的图像颜色，然后我减少了它的不透明度。所以我得到了彩色图像。当我将它悬停时，我将背景设置为再次透明并以完全不透明的方式成像。因此，有可能使用CSS为图像着色backgorund-color和opacity。

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;
}

对我来说效果很好。

如何在CSS中着色图像？

4 个答案: