Question

如何将图像设置为黑/白，然后在Safari和所有浏览器中悬停着色？

img.grayscale {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
    -webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */
    -webkit-backface-visibility: hidden; /* Fix for transition flickering */
}

img.grayscale:hover {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(0%);
}

http://jsfiddle.net/KDtAX/487/

此代码在Safari中不起作用。

Answer 1

我找到了一个适用于Google Chrome，Safari 6+＆amp; Opera 15+。只需将以下代码复制并粘贴到CSS文件中即可：

首先，将所有彩色图像变为黑白（100％灰色）;

然后，当鼠标移过时，将图像重新变为彩色。

img {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
}

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

如果您想将此效果仅应用于一张图片：

首先，在HTML文件中为此图片指定一个唯一的ID。例如：

<img src="img/stefets-picture.png" id="stefets-picture" alt="stefets's picture">

然后，在CSS文件中定义该ID的CSS规则：

#stefets-picture {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
}

#stefets-picture:hover {
    filter: none;
    -webkit-filter: grayscale(0);
}

希望这有帮助，

stefets

如何在Safari中悬停图像为黑/白然后着色？

1 个答案: