如何使用jquery应用多个css图像过滤器

Question

如何使用jquery

应用以下css代码

#centeredImage
{
   -webkit-filter: grayscale(20%) invert(0) blur(1px); 
}

已经尝试过，但没有用

$('#centeredImage').css('-webkit-filter','grayscale(20%) invert(0) blur(1px)'); 

Answer 1

只需使用过滤器：

$('#centeredImage').css('filter','grayscale(20%) invert(0) blur(1px)');

jQuery自动设置前缀。

Answer 2

您可以改为使用WebkitFilter：

$("#centeredImage").css({
    WebkitFilter: 'grayscale(20%) invert(0) blur(1px)'
})

<强> Fiddle Demo

Answer 3

也许将css创建为一个类

.centered-image
{
   -webkit-filter: grayscale(20%) invert(0) blur(1px); 
}

然后在jQuery中

$('#centeredImage').addClass('centered-image');

至少这样你保持javascript和样式的分离......