Question

我创建了Image。如何将彩色图像转换为黑色和白色。例如，将鼠标悬停在它上面。

Answer 1

首先在一个不错的图像编辑器中打开它，将其转换为灰度（我假设你想要比黑白更多的颜色;）），将它保存在web应用程序中。

然后，在鼠标悬停时，只需调用一些JavaScript函数，该函数会将HTML src元素的<img>更改为指向灰度图像的URL。

基本启动示例：

<img src="color.jpg" onmouseover="this.src='blackwhite.jpg'">

Answer 2

最简单的方法是在黑白服务器端创建另一个图像（如果图像不是动态的，则使用图像编辑程序），并在鼠标悬停时换掉b＆amp; w的颜色。

修改

然后只需使用css设置不透明度：http://www.quirksmode.org/css/opacity.html

Answer 3

Pixastic JS Image Manipulation库具有此功能，您可以通过JSNI调用。

还有this script似乎只能在IE中使用专有的Microsoft魔法。

但老实说，只需为服务器端的每个图像生成一个去饱和图像，然后使用JS / CSS将它们交换出来。

Answer 4

img {
  transition: filter .5s ease-in-out;
  -webkit-filter: grayscale(0%); /* Ch 23+, Saf 6.0+, BB 10.0+ */
  filter: grayscale(0%); /* FF 35+ */
}
img:hover {
  -webkit-filter: grayscale(100%); /* Ch 23+, Saf 6.0+, BB 10.0+ */
  filter: grayscale(100%); /* FF 35+ */
}

使用滤镜属性的灰度值可实现黑白效果。灰度（100％）对应于黑白，灰度（0％）对应于全彩色。该属性必须使用-webkit-filter前缀通过过渡属性可以实现平滑的动画

如何使图像黑白？

4 个答案: