改变亮度滤镜

Question

我正在尝试使用jQuery来更改页面上某些图像的亮度过滤器css属性，但是我在控制台中收到以下错误：“解析'过滤器'的值时出错。声明已丢失。”< / p>

以下是我正在使用的代码：

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的过滤器属性是否在firefox（或任何其他浏览器）中不起作用？

Answer 1

  

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

Here is the answer from MDN：

  

这是一项实验性技术

     

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

Answer 2

Firefox并不全球支持它。

查看caniuse.com/#search=filter。

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