改变亮度滤镜

时间:2014-07-30 17:43:37

标签: javascript jquery html css css3

我正在尝试使用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(或任何其他浏览器)中不起作用?

2 个答案:

答案 0 :(得分:1)

  

CSS3的过滤器属性在firefox(或任何其他浏览器)中是否起作用?

Here is the answer from MDN

  

这是一项实验性技术

     

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

enter image description here

答案 1 :(得分:1)

Firefox并不全球支持它。

查看caniuse.com/#search=filter

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