0

我正在处理一个网页，如果您将鼠标悬停在图像上，它会去饱和。它适用于 Chrome 和 IE。但是，我无法过渡到在 FF 中工作，并且它在 Opera 中根本没有去饱和。

这是我的代码：

<!DOCTYPE html>

<head>      
<style type="text/css">
    img:hover {         
        filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'saturate\' values=\'0.0\'/></filter></svg>#grayscale"); /* Firefox */
        filter: gray; /* IE */
        -moz-filter: grayscale(100%);
        -o-filter: grayscale(100%);
        -webkit-filter: grayscale(1); /* Webkit */}

    img {           
        -webkit-filter: grayscale(0);
        -moz-filter: grayscale(0);
        -o-filter: grayscale(0);
        filter: none;
        filter: grayscale(0);}

    img.transition {
        -moz-transition: all 0.5s ease-in-out; /* FF */
        -o-transition: all 0.5s ease-in-out; /* Opera 10.5 */
        -webkit-transition: all 0.5s ease-in-out; /* Webkit */
        transition: all 0.5s ease-in-out;}
</style>
</head>

<html>
<body>
    <img src="http://www.wallpapershd.biz/wallpapers/2012/12/Cardinal-Bird-1024x1280.jpg" width="500" class="transition" />
</body>
</html>

我见过类似的问题，但我是初学者，所以答案有点抽象；您不必自己向我提供代码，而是向我指出一个我可以理解的详细答案。如果有人可以帮助我，那就太好了。

4

1 回答 1

0

为什么不使用从红色到灰色的简单颜色过渡？

于 2013-02-22T01:56:26.900 回答