Question

我正在一个音乐网站上工作，该网站显示任何给定播放曲目的波形。波形是预先生成的，实际波形是透明的，波形“周围”的区域是白色。这使我可以使用图像背后的背景颜色轻松设置实际波形颜色。但是，我需要将波形周围的“区域”转换为黑色。

我对此有何选择？到目前为止，这是事情的发展方向：

我无法使用JS库，因为我遇到了跨域问题，因为波形位于不同域的CDN上。
使用CSS` -webkit-filter：invert（）;
我无法让FireFox中的-moz-filter: invert(100%);工作。它也不适用于SVG过滤器。
不确定我将如何处理MSIE。

任何建议都赞赏！

Answer 1

如果您的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");

Answer 2

如果您使用Walter的答案（过滤器：...）有奇怪的颜色问题，可以将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

在客户端浏览器上反转图像上的颜色：我有哪些选择？

2 个答案: