如何将图像变成黑/白，然后在Safari上悬停着色？

如何将图像变成黑色/白色，然后在Safari和所有浏览器中悬停着色？如何将图像变成黑/白，然后在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工作。

来源

2013-05-02 user2322509

对我的作品在Safari Mac上，但不是Windows ... – Kyle 2013-05-02 08:58:06

您可能需要更新您的Safari版本才能使其正常工作。或者，如果你希望它跨浏览器尝试一种不同的方式，也许使用jQuery – Andrew 2013-05-02 08:59:40

所有这四种情况在Safari 6.0.2中也适用于我（Mac） – pzin 2013-05-02 08:59:49

我发现了一个解决方案，可以在Google Chrome，Safari 6+ & Opera 15+上运行。只需将以下代码复制并粘贴到您的CSS文件中即可：

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

然后，当您将鼠标移到上方时，将图像变回颜色。

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

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

如果你要这种效果只适用于一个图像：

第一，给这个图片一个唯一的ID在HTML文件中。例如：

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

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

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

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

希望这有助于

stefets

来源

2017-03-18 19:31:09 stefets

如何将图像变成黑/白，然后在Safari上悬停着色？

回答

相关问题