javascript - 更改亮度滤镜

Question

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

这是我正在使用的代码:

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

Is the filter property for CSS3 just not functional in firefox (or any other browsers)?

Here is the answer from MDN :

This is an experimental technology

Because this technology's specification has not stabilized, check the compatibility table for the proper prefixes to use in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the spec changes.