有沒有一種方法可以使css懸停時將base64編碼的背景圖像png變成黑白？

Question

我沒有找到解決該問題的方法。 如果將svgs與灰度濾鏡一起使用似乎是可能的，但是有沒有簡單的方法僅使用css來做到這一點？

更新：

filter: grayscale(100%);
-webkit-filter: grayscale(100%);

和

-webkit-filter: grayscale(0);
filter: grayscale(0%);

適用於最新的Firefox和Chrome版本。

Answer 1

可以將圖像包裝到div中。 然后隱藏一個顯示圖像。 並更改div的顏色。

CSS示例： http ： //www.w3schools.com/cssref/sel_hover.asp

這是工作示例，希望它是您想要的： https : //jsfiddle.net/3v4on7cv/

#testDiv:hover > img 

是所需的CSS選擇器，它將選擇ID為“ testDiv”的懸停元素的所有父圖像

Answer 2

如果您已成功使用base64字符串設置了背景圖像數據，則只需對帶有黑白數據的：hover再次進行設置即可。