0

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

我对此有什么选择？到目前为止，情况是这样的：

  • 我不能为此使用 JS 库，因为我遇到了跨域问题，因为波形位于不同域的 CDN 上。
  • 使用 CSS `-webkit-filter: invert(); 在 Chrome 中一切正常
  • 我无法-moz-filter: invert(100%);在 FireFox 中工作。它也不适用于 SVG 过滤器。
  • 不知道我会用 MSIE 做什么。

任何建议表示赞赏！

4

2 回答 2

1

如果你的 wave 是一张图片，我会为 Firefox 使用以下 CSS（注意：没有 -moz- 过滤器）。

    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-25T22:21:26.527 回答
0

如果您使用 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

于 2013-11-12T00:40:26.617 回答