顛倒客戶端瀏覽器上的圖像顏色：我有什麼選擇？

我正在一個音樂網站上顯示任何給定的播放曲目的波形。波形已經預先生成，實際波形是透明的，波形周圍的區域是白色的。這使我可以使用圖像背後的背景色來輕鬆設置實際的波形顏色。但是，我需要將波形周圍的「區域」轉換爲黑色。顛倒客戶端瀏覽器上的圖像顏色：我有什麼選擇？

我對此有何選擇？這是怎麼會事到目前爲止已經打算：

我不能因爲一個事實，即波形上的CDN不同的域上使用JS庫這一點，因爲我碰到跨域問題。在Chrome瀏覽器中使用CSS`-webkit-filter：invert（）;
我無法在FireFox中獲得-moz-filter: invert(100%);的工作。它也不適用於SVG過濾器。
不知道我會用MSIE做什麼。

任何意見，讚賞！

來源

2013-06-24 sbrattla

如果你的wave是一個圖像，我使用下面的CSS for Firefox（注意：no -moz- filter）。

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 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0\'/></filter> 
     </svg>#grayscale");

來源

2013-07-25 22:21:26

如果您在使用沃爾特的答案奇異色彩的問題（過濾器：......），你可以添加color-interpolation-filters="sRGB"自己的過濾

所以沃爾特的答案就

filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'> 
    <filter id=\'grayscale\' color-interpolation-filters=\'sRGB\'> 
    <feColorMatrix type=\'matrix\' values=\'-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0\'/></filter> 
    </svg>#grayscale");

來源：http://forum.userstyles.org/discussion/comment/69793#Comment_69793

來源

2013-11-12 00:40:26

顛倒客戶端瀏覽器上的圖像顏色：我有什麼選擇？

回答

相關問題