如何使圖像黑白？

Question

我已經創建了圖像。 如何將彩色圖像轉換為黑白圖像。 例如，將鼠標懸停在其上。

Answer 1

首先在合適的圖像編輯器中將其打開，將其轉換為灰度 （我假設您想要的顏色多於黑白；）），將其保存在Web應用程序中。

然后，在鼠標懸停時，只需調用一些JavaScript函數即可，該函數將HTML <img>元素的src更改為指向灰度圖像的URL。

基本的啟動示例：

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

Answer 2

最簡單的方法是在黑白服務器端創建另一張圖像（如果圖像不是動態圖像，則使用圖像編輯程序），然后在鼠標懸停時將顏色換成黑白。

編輯

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

Answer 3

Pixastic JS圖像處理庫具有此功能，您可以通過JSNI進行調用。

還有這個腳本似乎只能在使用專有Microsoft Magic的IE中工作。

但老實說，只要在服務器端為每個想要的圖像生成一個去飽和的圖像，然后使用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前綴。使用transition屬性可以實現流暢的動畫