更改亮度滤镜

Question

我正在尝试使用 jQuery 更改页面上某些图像的亮度滤镜 css 属性，但我在控制台中收到以下错误：“解析 'filter' 的值时出错。声明已删除。”

这是我正在使用的代码：

function changeBrightness() {
     $("#myImg").css({
     "filter"         : "brightness(50%)",
     "-webkit-filter" : "brightness(50%)",
     "-moz-filter"    : "brightness(50%)",
     "-o-filter"      : "brightness(50%)",
     "-ms-filter"     : "brightness(50%)"
     });
}

我也尝试了上述其他格式，只是想看看它是否可以工作，但它们会产生相同的错误：

function changeBrightness() {
     var brightness = "brightness(50%)";
     $("#myImg")
        .css("filter",brightness)
        .css("webkitFilter",brightness)
        .css("mozFilter",brightness)
        .css("oFilter",brightness)
        .css("msFilter",brightness);
}

我也尝试了这种通用格式，希望 jQuery 能够处理前缀：

function changeBrightness() {
     $("#myImg").css("filter", "brightness(50%)");
}

当我单击按钮时会调用 changeBrightness 函数，它应该将 ID 为“myImg”的图像的亮度更改为 50%。我正在使用 Firefox 24.7。 CSS3 的 filter 属性是否在 firefox（或任何其他浏览器）中不起作用？

Answer 1

CSS3 的过滤器属性是否在 firefox（或任何其他浏览器）中不起作用？

Here is the answer from MDN:

这是一项实验性技术

由于该技术的规范尚未稳定，请检查compatibility table 以获取在各种浏览器中使用的正确前缀。另请注意，实验技术的语法和行为可能会随着规范的变化在未来版本的浏览器中发生变化。

Answer 2

Firefox 不全球支持它。

查看caniuse.com/#search=filter。

顺便说一句，caniuse.com 是检查此类内容的绝佳资源。